0

我有这个网站。如您所见，菜单栏位于社交网络按钮下方。由于社交网络按钮的容器 div 设置为display: inline-block并且导航栏设置为display: inline，我希望这两个元素像这里一样在同一行，但是没有..为什么？

<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>
4

5 回答 5

2

.social被设定为display: block;

如果您希望您的<nav>和.social元素彼此相邻出现，请将它们都设置为display: inline-block.

于 2013-08-15T12:22:38.923 回答
0

我.social设置为display: inline-block;然后设置nav为display: inline-block;太。

于 2013-08-15T12:29:56.997 回答
0

或者您可以使用float:left;使整个导航元素在同一行。

于 2013-08-15T12:23:57.113 回答
0

制作一个 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>

另一种方式是安德烈·迪翁的回答。

于 2013-08-15T12:28:54.883 回答
0

nav 和两个元素都应该有“vertical-align:top;”，默认是垂直居中的。

于 2016-02-24T19:05:01.963 回答