HTML中如何实现两个元素并排摆放：解决button与h3无法横向排列问题

问题原因 #

h3属于原生块级元素，默认会独占一行，所以才会出现嵌套了button的h3元素跑到input下方的情况。

解决方案 #

方案1：Flex布局（最推荐，适配性强）

给父容器#input2添加Flex布局属性即可快速实现并排，还能轻松调整对齐方式和间距：

#input2 {
  display: flex;
  align-items: center; /* 实现两个元素垂直居中对齐 */
  gap: 10px; /* 自定义两个元素之间的间距 */
}

方案2：行内块级适配

如果不想用Flex，也可以将两个元素都设置为行内块级元素实现并排：

#input2 input,
#input2 h3 {
  display: inline-block;
  vertical-align: middle; /* 垂直对齐 */
  margin-right: 8px; /* 调整间距 */
}
/* 可以额外去掉h3默认的外边距避免排版偏移 */
#input2 h3 {
  margin: 0;
}

额外优化建议 #

h3标签本质是标题语义标签，如果你只是用它来包裹button没有标题文本的需求，建议直接去掉多余的h3嵌套，直接把button和input同级摆放，代码结构更符合语义规范：

<div id="input2">
  <input>
  <button id="input">Add</button>
</div>

调整后上面两个布局方案依然适用。

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