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;使整个nav元素位于同一行。

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>

其他方式是AndréDion回答。

Answer 4

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

Answer 5

两个元素nav都应该有“vertical-align：top;”，默认情况下是垂直居中。

两个元素`display：inline`和`display：inline-block`不在同一行

5 个答案: