css - 两个元素 `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 .