HTML: display: block - 但元素仍然显示为内联

Question

我是编程新手，stackoverflow 到目前为止非常有用。很抱歉，如果这个问题对你们中的一些人来说似乎有点简单，但我真的想不通:

我正在使用 Bootstrap 开发我的页面并创建了一个工作正常的按钮。在该按钮下方，我想要 Facebook-Like & Twitter 按钮。这就是我想要的。但有趣的是，FB 按钮总是显示在同一行上(因此位于 BOOTSTRAP BUTTON 的左侧(这就是我在代码中的命名方式)。

<a href="#Meinung" class="btn btn-primary btn-lg pull-right smoothScroll" style="display: block">BOOTSTRAP BUTTON</a>
<div class="fb-like pull-right" data-href="http://www.hafenkran-zuerich.ch" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

如您所见，我已将按钮的样式设置为:display: block。但 Facebook 按钮仍然显示在左侧。我什至尝试在 a 中设置 BOOTSTRAP BUTTON，默认情况下它们是 block 元素。但这也没有解决问题。有什么想法吗？

Answer 1

尝试从 Bootstrap 按钮和 Facebook 按钮中删除 pull-right 类。

该类导致两个元素都向右浮动，这就是它们并排显示的原因。

这是一个 fiddle :http://jsfiddle.net/JkD8g/

但是如果您需要在两个元素上保留 pull-right 类，您可以通过应用 clear:right 或 clear 清除 Bootstrap 按钮的 float :都到 Facebook 按钮。

这是另一个 fiddle :http://jsfiddle.net/Hudpz/