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

Question

我想知道如何制作它以便它们可以有文本,然后是一个按钮,然后是更多文本,所有这些都在一行上？这可能是这样的:

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

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>
!