如何让<label>标签与<input type="number">输入框横向对齐？

问题描述 #

我正在制作一份评估表单，但标签无法与输入框对齐，希望输入框紧邻标签右侧。当前输入框位于标签的右下方，我已尝试在CSS中为input[type="number"]添加float和clear属性，但没效果。以下是原代码：

原CSS代码 #

.container {
  margin: 0 auto;
  width: 60%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  text-align: center;
}

input[type="number"] {
  margin: 5px 0;
  padding: 8px;
  width: 10%;
  float: right;
  clear: both;
}

label {
  display: inline;
  flex-direction: column;
  width: 100px;
  font-family: "Times New Roman", Times, serif;
}

原HTML代码 #

<div class="container">

  <hr>

  <h4>1. 专业素养与人际关系</h4>

  <br>
  <br>
  <hr>

  <label>1.1 因勤奋、真诚、尊重他人、平易近人且善于合作，普遍受到行政人员和同事喜爱。</label>

  <input type="number" name="q1" min="1" max="5" required>

  <br>
</div>

问题原因 #

1. label设置了display: inline，同时错误添加了flex-direction: column——内联元素不支持Flex布局属性，该设置无效。
2. input[type="number"]使用了float: right和clear: both，强制输入框换行并靠右，导致和标签不在同一行。
3. .container的text-align: center会让内联元素居中，进一步打乱横向对齐的布局逻辑。

解决方案：使用Flex布局实现对齐 #

将每个标签和输入框的组合包裹在一个容器中，利用Flex布局实现横向对齐，同时调整整体样式：

修改后的CSS代码 #

.container {
  margin: 0 auto;
  width: 60%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

/* 包裹每个问题项的容器，用Flex实现横向对齐 */
.question-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 标签左对齐，输入框右对齐 */
  margin: 15px 0;
}

input[type="number"] {
  padding: 8px;
  width: 60px; /* 固定宽度更美观 */
}

label {
  flex: 1; /* 标签占据剩余空间 */
  margin-right: 15px;
  font-family: "Times New Roman", Times, serif;
}

.section-title {
  text-align: center; /* 仅标题居中 */
}

修改后的HTML代码 #

<div class="container">
  <hr>
  <h4 class="section-title">1. 专业素养与人际关系</h4>
  <br>
  <hr>

  <!-- 用question-item容器包裹标签和输入框 -->
  <div class="question-item">
    <label>1.1 因勤奋、真诚、尊重他人、平易近人且善于合作，普遍受到行政人员和同事喜爱。</label>
    <input type="number" name="q1" min="1" max="5" required>
  </div>
</div>

关键调整说明 #

• 新增.question-item容器，通过display: flex让标签和输入框在同一行排列。
• align-items: center确保标签和输入框垂直居中对齐。
• justify-content: space-between让标签靠左、输入框靠右，保持布局整洁。
• 移除了原代码中无效的flex-direction: column、float、clear属性，调整输入框宽度为固定值，避免自适应宽度的问题。

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