Question

我想显示<h4>符合<button>：

    <h4 style="display:inline-block;">headline</h4>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
        <span>Button</span>
      </button>
    </div>

https://jsfiddle.net/punwaew1/1/

结果：两个元素显示在彼此下方。为什么呢？

Answer 1

display元素的<div>默认值为display:block;。您还必须将display:inline-block;设置为<div>！

只需添加以下规则（https://jsfiddle.net/punwaew1/5/）：

div.dropdown {
  display:inline-block;
}

Answer 2

因为h4和.dropdown处于同一级别。为同一级别的元素设置display: inline-block以使它们对齐。

h4,
.dropdown {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

<h4>headline</h4>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
    <span>Button</span>
  </button>
</div>

Answer 3

将线条样式添加到<div class="dropdown" **style="display:inline-block;"**>

<强> DEMO 1

或者使用正确的行和列的bootstrap来获得最佳结果和一致性。

Answer 4

这是你的小提琴只需给display: inline-block下拉div https://jsfiddle.net/sesn/punwaew1/4/

Answer 5

这可以在没有任何额外的CSS的情况下完成。因此，为了使您的按钮与标题内联，请将按钮放在<h2></h2>标题标记之间。

结构：

<h1>Headline 
  <button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
    Button
  </button>
</h1>

查看您的更新小提琴here

如何购买符合标题的boostrap按钮？

5 个答案: