如何用CSS实现HTML Label与Input上下组横向并排布局

嘿，我来帮你搞定这个布局需求！你想要的是每个Label在对应Input上方，同时所有表单组横向并排对吧？咱们先看看原代码里的问题，再一步步调整~

原代码的问题分析 #

1. 所有表单元素都挤在同一个<div>里，没有给每个label+input单独分组，没法实现横向排列
2. 用了大量<br>来控制换行，这会让布局很难维护，应该交给CSS来处理
3. 原CSS里给input加了margin-left: 150px和clear: both，这反而会把input挤到右边还强制换行，完全达不到并排效果

修改后的代码实现 #

咱们重新调整HTML结构，再配合CSS来实现目标布局：

调整后的HTML代码

<div id="tk">
  <form action="" method="">
    <div id="styleform">
      <!-- 每个label+input套一个.form-group容器 -->
      <div class="form-group">
        <label for="NAME">FIRST NAME</label>
        <input type="text" id="NAME" size="20">
      </div>
      <div class="form-group">
        <label for="no">NUMBER</label>
        <input type="number" id="no" size="45">
      </div>
      <div class="form-group">
        <label for="age">AGE</label>
        <input type="number" id="age" size="45">
      </div>
      <div class="form-group">
        <label for="S_NO">CODE</label>
        <input type="text" id="S_NO" size="20">
      </div>
    </div>
  </form>
</div>

调整后的CSS代码

body { 
  background-color: red; 
}

/* 每个表单组的样式：横向并排 */
.form-group {
  display: inline-block;
  margin: 10px 15px; /* 给每个组加左右间距和上下间距 */
}

/* Label样式：在Input上方，占一行 */
.form-group label {
  display: block; /* 让label变成块级元素，独占一行 */
  margin-bottom: 5px; /* 和下方input留一点间距 */
  text-align: left; /* 文字左对齐，可根据需求调整 */
}

/* Input统一样式 */
input[type=text], input[type=number] {
  border: 2px solid black;
  border-radius: 4px;
  /* 去掉原有的margin-left和clear: both，避免干扰布局 */
}

关键属性解释 #

• .form-group设置display: inline-block：让每个表单组可以横向排列，同时保持块级元素的特性（可以设置宽高、内外边距）
• .form-group label设置display: block：让label独占一行，自然出现在input的上方
• 去掉了原CSS里的margin-left和clear: both：这些属性会破坏横向布局，完全不需要

这样调整后，就能实现你想要的效果：每个Label在Input上方，所有表单组横向并排，和你参考的示例图一致啦！

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