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

Question

我在想如何让文本后面跟着一个按钮，然后是更多的文本，都在同一行上？就像这样：

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

- JohnyNich

---

将 display:inline 添加到块元素中，或者使用内联元素。或者将它们包装在 span 中。 - Mike B

将元素设为display:block;？ - user7402861

@MikelisBaltruks 我不明白他的问题...他想要元素在同一行还是像代码中一个接一个地排列？如果是同一行，他可以使用inline、inline-block、float。 - user7402861

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

Answer 2

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

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

- Dmitry Kolchev

Answer 3

给它们一个 "float: left"。

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

https://jsfiddle.net/n79gwgqk/

- Mathias W

Answer 4

您可以使用格式为按钮的a标签。例如，如果您使用了Bootstrap，则可以使用Some <a class="btn btn-primary">Text</a>!。只要您不需要使用特定于button标签的样式，这应该是有效的。

- Krishnan Shankar

Answer 5

试试这个：

.ele_inline {
      display: inline
}

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

- mmuzahid