如何用CSS实现输入框两端对齐？Web编程新手求助

要让表单里的标签和输入框实现整齐的两端对齐效果，你可以通过调整CSS布局来实现，以下是两种实用的解决方案：

方法一：使用inline-block布局（传统兼容方案） #

修改你的HTML和CSS代码如下：

HTML代码 #

<div class="welcome"><h1>WELCOME!</h1></div>
<form class="form">
  <div class="form-row">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div class="form-row">
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname">
  </div>
  <div class="form-row">
    <label for="pnber">Phone number:</label>
    <input type="tel" id="pnber" name="pnber">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
</form>

CSS代码 #

.form {
  color: white;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 250%;
  text-align: center; /* 让整个表单居中 */
}

.form-row {
  margin: 8px 0; /* 给每一行添加上下间距 */
}

.form-row label {
  display: inline-block; /* 允许设置宽度并和输入框同行 */
  width: 120px; /* 统一标签宽度，根据需求调整 */
  text-align: right; /* 标签文字右对齐，对齐输入框 */
  margin-right: 10px; /* 标签和输入框之间的间距 */
}

.form-row input {
  width: 180px; /* 统一输入框宽度，可选 */
  padding: 4px; /* 优化输入框内边距 */
}

方法二：使用Flex布局（现代简洁方案） #

Flex布局更灵活，不需要固定宽度也能实现对齐，代码如下：

CSS代码（HTML结构和上面一致） #

.form {
  color: white;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center; /* 整个表单居中 */
  gap: 12px; /* 行与行之间的间距 */
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px; /* 标签和输入框的间距 */
}

.form-row label {
  flex: 0 0 120px; /* 固定标签宽度，不收缩不拉伸 */
  text-align: right;
}

.form-row input {
  flex: 1; /* 输入框自动填充剩余空间，也可以设置固定宽度 */
  min-width: 180px;
  padding: 4px;
}

关键说明 #

• 给每个label和input包裹在.form-row容器中，方便控制单行布局
• 通过固定标签宽度+右对齐，或者Flex的固定宽度分配，让所有输入框的起始位置保持一致，实现视觉上的两端对齐
• 可以根据实际需求调整标签宽度、输入框宽度和间距数值

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