为何布局中按钮自动换行？如何实现标题与按钮同行显示？

直接导致换行的核心错误 #

你写的第一个子div存在语法错误：把样式属性写在了width属性里，而不是正确的style属性中。原代码里的<div width="float: left; width: 50%">完全不生效，这个div会默认占据整行宽度，直接把右侧的按钮挤到下一行。

次要隐患（即使修正语法后可能仍有问题） #

就算把第一个div的属性改成style="float: left; width: 50%"，两个子div各占50%宽度的设置也不合理：h4和button元素自带默认的margin、padding，加起来总宽度会超过父容器的100%，依然会触发换行。

修正后的可行代码 #

<div style="overflow: hidden;"> <!-- 清除浮动，防止父容器高度塌陷 -->
  <div style="float: left;">
    <h4 style="margin: 0;">Header</h4> <!-- 移除h4默认外边距，避免额外宽度占用 -->
  </div>
  <div style="float: right;">
    <button>Export to Excel</button>
  </div>
</div>

优化说明 #

• 不给子div设置固定宽度，让它们根据内容自适应，避免宽度溢出问题；
• 用overflow: hidden给父容器清除浮动，保证父容器能包裹住两个浮动的子元素；
• 重置h4的默认margin，消除浏览器默认样式对布局的干扰。

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