HTML: display: block - но элемент все еще отображается как inline

Question

Я довольно новичок в программировании, и stackoverflow был очень полезен до сих пор. Извините, если некоторые из вас могут показаться немного простыми, но я действительно не могу понять это:

Я использую Bootstrap для разработки моей страницы и создания кнопки, которая работает отлично. Просто ниже этой кнопки я хочу Facebook-Like & Twitter Button. Это то, что я хотел бы. Но что интересно, кнопка FB всегда показывает на той же линии (отсюда, слева от кнопки Bootstrap (это, как я назвал его в коде)

<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 отображается слева. Я даже попытался установить BOOTSTRAP BUTTON внутри a, которые по умолчанию являются элементами блока. Но это также не решило проблему. Любые идеи?

Answer 1

Попробуйте удалить класс pull-right как с кнопки Bootstrap, так и с Facebook.

Этот класс вызывает плавание обоих элементов r поэтому они отображаются рядом друг с другом.

Вот Fiddle: http://jsfiddle.net/JkD8g/

Однако, если вам нужно покинуть pull-right класс на обоих элементах, вы можете очистить поплавок баттона Bootstrap, применяя clear:right или clear:both на кнопку Facebook.

Вот еще Fiddle: http://jsfiddle.net/Hudpz/