如何将 <button> 与文本内联对齐？

Question

我想知道如何才能让文本后跟一个按钮，然后是更多文本，所有这些都在一行上？这可能是这样的：

 <h3>Some</h3>
<button>Text</button>
<h3>!</h3>

原文由 JohnyNich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<h3> 等所有标题标签都是块级的，一个块级元素占据其父元素（容器）的整个空间。您可以将其重置为 display: inline ， display: inline-block （推荐）， display: inline-table ，甚至使用 flexbox，float 等有很多方法。

如果你可以修改标记，我建议不要使用 <h3> 出于语义原因，只需使用 <span> 标签或纯文本将是更好的选择。

 h3 {
  display: inline-block;
  margin: 0;
}

 <h3>Some</h3>
<button>Text</button>
<h3>!</h3>

<hr>

<span>Some</span>
<button>Text</button>
<span>!</span>

<hr>

Some
<button>Text</button>
!

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

据我所知，H3 元素可以包含其他标记元素。 H3文本中的简单内联按钮

 <h3>Hello&nbsp;<button>Say Hello</button>&nbsp;World</h3>

原文由 Dmitry Kolchev 发布，翻译遵循 CC BY-SA 4.0 许可协议