Два элемента `display: inline` и` display: inline-block` находятся не в одной строке

Question

У меня есть это site. Как вы можете видеть, панель меню находится ниже кнопок социальных сетей. Так как контейнер div социальных кнопок сети установлен как display: inline-block, а навигация установлена ​​как display: inline, я ожидал, что оба элемента были в той же строке, что и here, но нет .. почему?

<header class="tab-content cabecera"> 
     <a class="logo pull-left" href="/"> 
     <img src="images/logo1.png" width="250px" alt="ziiweb"/> 
     </a> 
     <div class="social"> 
     <div class="fb-like" data-href="http://www.facebook.com/!!!" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div> 
     <g:plusone align="middle"></g:plusone> 
     </div> 
     <nav style="display: inline"> 
     <ul class="nav nav-pills"> 
     <li class="active"><a href="#">Inicio</a></li> 
     <li><a href="#">Qué ofrecemos</a></li> 
     <li><a href="#">Trabajos</a></li> 
     <li><a href="#">Contacto</a></li> 
     </ul> 
     </nav> 
    </header> 

Answer 1

.social установлен в display: block;

Если вы хотите, чтобы оба ваши <nav> и .social элементы появляются рядом друг с другом, установить их как на display: inline-block.

Answer 2

Или вы можете использовать float:left;, чтобы весь элемент навигации находился в одной строке.

Answer 3

Сделайте div и сохраните как .social, так и nav. Используйте display: inline-block; в этом
также использовать float: left; в .social

<div class="outer" style="display: inline-block; width: 700px;"> 
<div class="social" style="float: left;">...</div> 
<nav>...</nav> 
</div> 

Другой способ это то, что Андре Дион ответил.

Answer 4

I .social установлено в display: inline-block;, а затем установлено nav - display: inline-block;.

Answer 5

Оба элемента nav и должны иметь «vertical-align: top;», по умолчанию - по центру по центру.