如何阻止HTML中按钮在h1标题下方自动换行？

问题本质是<h1>属于块级元素，默认会占据父容器的整行宽度，所以后续的按钮元素会被挤到下一行。以下是几种实用的解决方法：

方法1：使用Flexbox布局（推荐） #

通过一个容器包裹标题和按钮，利用Flexbox实现同行排列，还能轻松控制垂直对齐和间距：

<div class="header-group">
  <h1>网站标题</h1>
  <button>点击操作</button>
</div>

.header-group {
  display: flex;
  align-items: center; /* 让标题和按钮垂直居中对齐 */
  gap: 15px; /* 标题与按钮之间的间距，可按需调整 */
}

方法2：将H1设置为inline-block #

把<h1>的显示模式改为inline-block，使其不再独占一行，同时调整垂直对齐避免错位：

<h1 class="inline-title">网站标题</h1>
<button>点击操作</button>

.inline-title {
  display: inline-block;
  margin: 0; /* 清除H1默认的上下外边距，避免垂直间距异常 */
  vertical-align: middle; /* 与按钮垂直居中对齐 */
}

方法3：使用浮动布局（旧方案，兼容老浏览器） #

将按钮浮动到右侧，同时给标题留出足够空间避免重叠：

<div class="header-wrap">
  <h1>网站标题</h1>
  <button class="right-btn">点击操作</button>
</div>

.header-wrap {
  overflow: hidden; /* 清除浮动，防止容器高度塌陷 */
}
.right-btn {
  float: right;
}
h1 {
  margin-right: 100px; /* 根据按钮宽度调整，避免标题与按钮重叠 */
}

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