Question

我有一个包含多个标签和输入的网格容器。是否可以将网格配置为始终用两列自动填充空间，以便标签与相应的输入断线？

调整大小前的网格：

<头>


标签	输入	标签	输入	标签	输入

调整大小后的网格：

<头>


标签	输入	标签	输入
标签	输入

Answer 1

只需将输入包裹在标签内：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap:5px;
}


input{
  width:50%;
  float:right;
}

<div class="grid">
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
</div>

CSS 网格自动填充始终为两列

1 个答案: