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

Answer 2

给他们一个float: left

h3, button{
    float: left;
    margin: 0;
}

https://jsfiddle.net/n79gwgqk/

Answer 3

试试这个：

.ele_inline {
      display: inline
}

<h3 class="ele_inline">Some</h3>
<button class="ele_inline">Text</button>
<h3 class="ele_inline">!</h3>

Answer 4

您可以使用格式化为按钮的a标签。就像使用Bootstrap Some <a class="btn btn-primary">Text</a>!一样。只要您不需要使用特定于button标签的某些样式，该方法就可以工作。

Answer 5

据我所知，H3元素可以包含其他标记元素。只需在H3文本中内嵌按钮

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

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

5 个答案: