如何在HTML中实现两段文本并排？表单文本排版问题咨询

你遇到的核心问题是未将标签与对应输入框分组，且多余的<br>标签破坏了并排布局。以下是修复方案：

修改思路 #

• 将每个标签（NAME/AGE）与对应输入框封装为独立单元，确保标签在输入框上方，且两个单元水平并排
• 移除硬编码的<br>标签，通过CSS控制布局逻辑

修改后的代码 #

CSS #

body {}

/* 表单分组容器，实现水平并排 */
.form-group {
  display: inline-block;
  margin-right: 5px;
  width: 170px; /* 与输入框宽度一致，保证整体对齐 */
}

input[type='name'],
input[type='date'] {
  width: 100%;
  height: 25px;
  margin-top: 7px;
  box-sizing: border-box; /* 避免宽度溢出容器 */
}

#emailcheck {}

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}

.checkboxes input {
  vertical-align: middle;
}

.checkboxes label span {
  vertical-align: middle;
}

button {
  margin-top: 10px;
}

.form {
  padding: 10px;
  width: 400px;
  margin: 0 auto;
  border: 1px solid #000;
}

label {
  display: inline-block;
}

.form-group p {
  margin: 0; /* 清除段落默认边距，避免多余间距 */
}

HTML #

<div class="form">
  <form action="#" method="post">
    <!-- 姓名输入项分组 -->
    <div class="form-group">
      <p>NAME</p>
      <input type="name" id="name" placeholder="First and Last names" required/>
    </div>
    <!-- 年龄输入项分组 -->
    <div class="form-group">
      <p>AGE</p>
      <input type="date" id="date" required/>
    </div>
    <div class="checkboxes">
      <label><input type="checkbox" id="emailcheck" name="emailcheck" value="yes"> <span>Receive emails?</span></label><br>
      <button>Submit</button>
    </div>
  </form>
</div>

关键说明 #

1. .form-group容器：通过inline-block实现水平并排，设置固定宽度与输入框匹配，确保整体对齐规整
2. 输入框宽度设为100%：继承容器宽度，避免手动调整宽度时出现不一致问题
3. 清除段落默认边距：消除p标签自带的上下边距，避免布局间距混乱
4. 移除多余<br>标签：用CSS控制布局逻辑，让HTML结构更清晰易维护

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