表单设置display:inline后输入元素无法横向排列问题求助

问题原因 #

• 你给form容器设置display: inline完全没起到作用，这个属性是用来控制form自身和外部其他元素的排列关系，不会改变form内部元素的布局逻辑。
• 真正导致元素无法横向排列的核心原因是HTML中的<br>标签——它是强制换行元素，每一个<br>都会强制后续元素跳到下一行，容器的display设置根本无法抵消这个效果。

修正方案 #

方案1：使用Flex布局（推荐，现代且易维护）

将form容器的display改为flex，同时可添加间距优化布局，必须去掉所有<br>标签：

#container {
  display: flex;
  gap: 15px; /* 控制元素间的横向间距 */
  align-items: center; /* 让label与input垂直居中对齐 */
}

<form id="container">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</form>

方案2：直接调整内部元素（适合简单场景）

去掉所有<br>标签，给label设置合适的样式让它和input自然横向排列：

#container label {
  display: inline-block;
  margin-right: 8px; /* 给label右侧加间距，避免和input挤在一起 */
}

<form id="container">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</form>

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