Question

为什么span5没有走向正确的位置？ Span5是在Span6下面的。我链接到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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从您的代码段中，很难建议您做出最佳选择。虽然简单而且很简单。样式是将float:right添加到您的CSS中，如下所示：

.span5{
  float:right;
}

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

＆＃13;

.span5{
  float:right;
  }

＆＃13;

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

＆＃13;

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

＆＃13;

div{
  display:inline-block;
  }

＆＃13;

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

＆＃13;

为什么我的div没有向右走？

2 个答案: