css 在底部而不是右侧复制容器

t9aqgxwy 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(136)

嗨我写这个简单的网站，我不能得到重复出现在下面的链接是我现在有什么前一个底部。

var i = 0;
var original = document.getElementById("duplicater");

function duplicate() {
  var clone = original.cloneNode(true);
  clone.id = "duplicater" + ++i;
  original.parentNode.appendChild(clone);
}

h1 {
  text-align: center;
}

h3 {
  text-align: center;
  color: red;
  font-size: 13;
}

.grid-container-1 {
  display: grid;
  max-width: 480px;
  grid-auto-columns: repeat(3, 1fr);
  grid-template-areas: "nuevo content .";
}

.ProdRow {
  display: grid;
  max-width: 480px;
  grid-area: content;
  grid-auto-columns: repeat(3, 1fr);
  grid-template-areas: "code desc date";
  position: relative;
  float: down;
}

.selector {
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px;
  width: 150px;
  background-color: #ebebeb;
  position: relative;
}

.selector label {
  font-size: 10px;
  text-transform: upper;
  color: #777;
  padding: 2px 8px 0;
  position: relative;
  top: 6px;
}

.New-item {
  grid-area: nuevo;
}

.ProdRow #ItemCode {
  grid-area: code;
}

.ProdRow #Desc {
  grid-area: desc;
}

.ProdRow #FechaReq {
  grid-area: date;
}

<main id="main">
  <H1 id="titulo">Portal de solicitud de compra</h1>

  <div class="grid-container-1">
    <div class="New-item">
      <button id="NewBTN" onclick="duplicate()">Nuevo</button>
    </div>

    <div class="ProdRow" id="duplicater">
      <div class="selector" id="ItemCode">
        <Label id="etItCode">Código de producto</label>
        <select>
          <option>1</option>
          <option>222222</option>
        </select>
      </div>

      <div class="selector" id="Desc">
        <label id="etDesc">Descripción de producto</label>
        <select>
          <option>Lorem ipsum</option>
        </select>
      </div>

      <div class="selector" id="FechaReq">
        <label id="etFecha">Fecha requerida</label>
        <input type="date" id="fechareq" name="FechaReq">
      </div>

    </div>

  </div>

  <h3> En caso de no encontrar el producto solicitar su creación y reintentelo.</h3>
</main>

基本上，我试图复制表单的行，以包括更多的项目，这些行应该对齐。
我试过浮点数，相对位置，最大宽度，到目前为止都不起作用。
先谢谢你。

css

来源：https://stackoverflow.com/questions/75133768/duplicate-containers-on-bottom-instead-of-right

2条答案

按热度按时间

wwtsj6pe1#

你的JavaScript代码没有问题，问题出在CSS上。
我从CSS display: grid;的**.grid-container-1选择器下删除了这行代码，复制的表单显示在前一个表单的正下方。
因此，.grid-container-1**选择器的CSS应该如下所示：

.grid-container-1 {
    max-width: 480px;
    grid-auto-columns: repeat(3, 1fr);
    grid-template-areas: "nuevo content .";
}

赞(0）回复(0）举报 2023-01-18

9udxz4iz2#

document.querySelector('button#NewBTN').onclick = function(e){
    var parent = e.target.parentElement;
      var innerElement = `<div class="selector" id="ItemCode">
              <Label id="etItCode">Código de producto</label>
              <select>
                <option>1</option>
                <option>222222</option>
              </select>
            </div>
            <div class="selector" id="Desc">
              <label id="etDesc">Descripción de producto</label>
              <select>
                <option>Lorem ipsum</option>
              </select>
            </div>
            <div class="selector" id="FechaReq">
              <label id="etFecha">Fecha requerida</label>
              <input type="date" id="fechareq" name="FechaReq">
            </div>`;
      var div = document.createElement('div');
      div.classList.add('ProdRow');
      div.innerHTML = innerElement;
      parent.appendChild(div)
      //console.log(parent.innerHTML)
}

h1 {
  text-align: center;
}

h3 {
  text-align: center;
  color: red;
  font-size: 13;
}

.grid-container-1 {
  display:flex;
  flex-direction:column;
}

.New-item > button{
  margin-bottom:10px;
  padding: 6px 10px;
  background: coral;
  color: #fff;
  border-color: coral;
  border-radius: 4px;
}

.New-item > button:focus,
.ProdRow select,
.ProdRow input{
  outline:none;
}

.ProdRow {
  display:flex;justify-content:space-between;
  background-color: #ebebeb;
  padding: 10px;
  margin-bottom:5px;
  
}

.selector {
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px;
  width: 150px;
  position: relative;
}

.selector label {
  font-size: 10px;
  text-transform: upper;
  color: #444;
  margin: 0 0 5px;
  position: relative;
}

.ProdRow select,
.ProdRow input{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid #999;
}

<main id="main">
  <H1 id="titulo">Portal de solicitud de compra</h1>

  <div class="grid-container-1">
    <div class="New-item">
      <button id="NewBTN">Nuevo</button>
    </div>

    <div class="ProdRow">
      <div class="selector" id="ItemCode">
        <Label id="etItCode">Código de producto</label>
        <select>
          <option>1</option>
          <option>222222</option>
        </select>
      </div>

      <div class="selector" id="Desc">
        <label id="etDesc">Descripción de producto</label>
        <select>
          <option>Lorem ipsum</option>
        </select>
      </div>

      <div class="selector" id="FechaReq">
        <label id="etFecha">Fecha requerida</label>
        <input type="date" id="fechareq" name="FechaReq">
      </div>
    </div>
  </div>

  <h3> En caso de no encontrar el producto solicitar su creación y reintentelo.</h3>
</main>

尝试以下示例来解决您的问题，并让我知道您的想法

赞(0）回复(0）举报 2023-01-18

我来回答

css 在底部而不是右侧复制容器

2条答案

相关问题

热门标签

最新问答