为什么我的 div 不往右走？

Question

为什么 span5 没有转到正确的位置？ Span5 转到 Span6.I' 链接到 bootstrap

我的代码：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="span6">
        <a href="#">
          <img src="image/logo.png" class="logo_img" />
        </a>
      </div>
      <div class="span5">
        <ul class="nav nav-pills nav-pos">
          <li><a href="#">Ваш город</a>
          </li>
          <li><a href="#">Клиники</a>
          </li>
          <li><a href="#">Врачи</a>
          </li>
          <li><a href="#">Диагностика</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</header>

Answer 1

使用display: inline-block.

.span6, .span5 {
  display: inline-block;
  vertical-align: top;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="span6">
        <a href="#">
          <img src="http://dummyimage.com/40/" class="logo_img" />
        </a>
      </div>
      <div class="span5">
        <ul class="nav nav-pills nav-pos">
          <li><a href="#">Ваш город</a>
          </li>
          <li><a href="#">Клиники</a>
          </li>
          <li><a href="#">Врачи</a>
          </li>
          <li><a href="#">Диагностика</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</header>

Answer 2

根据您的代码段，很难说您是最佳选择。尽管一种 'simple' 样式是将 float:right 添加到您的 css 中，如下所示：

.span5{
  float:right;
}

下面的演示展示了这一点：

.span5{
  float:right;
  }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="span6">
        <a href="#">
          <img src="image/logo.png" class="logo_img" />
        </a>
      </div>
      <div class="span5">
        <ul class="nav nav-pills nav-pos">
          <li><a href="#">Ваш город</a>
          </li>
          <li><a href="#">Клиники</a>
          </li>
          <li><a href="#">Врачи</a>
          </li>
          <li><a href="#">Диагностика</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</header>

您也可以使用 display 选项，如下所示（对齐链接旁边的徽标）：

div{
  display:inline-block;
  }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="span6">
        <a href="#">
          <img src="image/logo.png" class="logo_img" />
        </a>
      </div>
      <div class="span5">
        <ul class="nav nav-pills nav-pos">
          <li><a href="#">Ваш город</a>
          </li>
          <li><a href="#">Клиники</a>
          </li>
          <li><a href="#">Врачи</a>
          </li>
          <li><a href="#">Диагностика</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</header>

为什么我的 div 不往右走？

Why my div not going to the right?

css

twitter-bootstrap