html - 如何将 与文本内联对齐？

Question

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

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

Answer 1

所有标题标签，例如 <h3>都是 block 级的，一个 block 级元素占据其父元素(容器)的整个空间。您可以将其重置为 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>
!