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

可以使用CSS的Flexbox布局来实现均匀分布。下面是一个例子：

HTML代码：

<div class="container">
  <label for="input1">Label 1:</label>
  <input type="text" id="input1">

  <label for="input2">Label 2:</label>
  <input type="text" id="input2">

  <label for="input3">Label 3:</label>
  <input type="text" id="input3">

  <label for="input4">Label 4:</label>
  <input type="text" id="input4">
</div>

CSS代码：

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

label {
  flex-basis: 25%;
}

input {
  flex-basis: 70%;
}

解释：

- `display: flex;` 将容器设置为Flexbox布局。
- `flex-wrap: wrap;` 允许子元素换行。
- `justify-content: space-between;` 将子元素在容器内均匀分布。
- `flex-basis: 25%;` 将标签的基础宽度设置为25%。
- `flex-basis: 70%;` 将输入框的基础宽度设置为70%。

这样就可以让标签和输入框在容器内均匀分布了。