网页 前端 许多个textbox+label组合如何在页面均匀排列分布 css 例子

可以使用CSS的Grid布局或Flex布局来实现这个效果。以下是两种方法的示例代码：

Grid布局：

<div class="grid-container">
  <div class="grid-item">
    <label for="textbox1">Label 1</label>
    <input type="text" id="textbox1">
  </div>
  <div class="grid-item">
    <label for="textbox2">Label 2</label>
    <input type="text" id="textbox2">
  </div>
  <div class="grid-item">
    <label for="textbox3">Label 3</label>
    <input type="text" id="textbox3">
  </div>
</div>

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

.grid-item {
  padding: 10px;
  border: 1px solid black;
}

Flex布局：

<div class="flex-container">
  <div class="flex-item">
    <label for="textbox1">Label 1</label>
    <input type="text" id="textbox1">
  </div>
  <div class="flex-item">
    <label for="textbox2">Label 2</label>
    <input type="text" id="textbox2">
  </div>
  <div class="flex-item">
    <label for="textbox3">Label 3</label>
    <input type="text" id="textbox3">
  </div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-item {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
}

这两种方法都可以让多个label+textbox组合均匀排列分布在页面上。其中Grid布局可以自适应浏览器宽度变化，而Flex布局需要设置每个组合的宽度。