如何让复制的表单行垂直排列而非横向？前端布局求助

点击「Nuevo」按钮复制表单行（ProdRow）时，复制的元素始终出现在原元素右侧而非下方，无法实现垂直对齐排列。尝试过float、相对定位、max-width等CSS属性但未解决。

问题根源 #

1. 父容器.grid-container-1的grid-template-areas将所有复制的ProdRow都指定到同一个content网格区域，Grid布局默认会在同一行内排列这些元素，导致横向显示。
2. float: down是无效的CSS属性，没有这个取值，无法起到垂直排列的作用。
3. CSS存在语法错误：text-transform: upper应为text-transform: uppercase，font-size: 13缺少单位px。

解决方案 #

1. 重构网格布局：将按钮单独放在左侧列，新增表单行容器实现垂直排列。
2. 移除无效CSS属性，修正语法错误。
3. 调整JS逻辑，将克隆元素添加到专门的表单行容器中。

修改后的完整代码 #

HTML #

<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="form-rows">
      <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>
  </div>

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

CSS #

h1 {
  text-align: center;
}

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

.grid-container-1 {
  display: grid;
  max-width: 480px;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.form-rows {
  display: grid;
  gap: 10px;
}

.ProdRow {
  display: grid;
  max-width: 480px;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}

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

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

.New-item {
  align-self: start;
}

JavaScript #

var i = 0;
var original = document.getElementById("duplicater");
var formRowsContainer = document.querySelector('.form-rows');

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

核心修改说明 #

• 新增.form-rows容器专门承载所有表单行，通过Grid布局实现垂直排列。
• 重构.grid-container-1为两列布局，按钮列与表单行区分开，避免布局冲突。
• 修正JS逻辑，将克隆元素添加到.form-rows容器中，确保新行自动垂直排列。

内容的提问来源于stack exchange，提问作者T_cant