Question

我能够使用下面的CSS将导航栏居中。现在我想把另一个元素放到右边。但是，当我添加图标时，它会下降到下一行。如何将导航栏居中并添加图标，同时保持内联的一切？

这是我的一个带有css的导航栏。

    <div class="collapse navbar-collapse" id="myNavbar" style="text-align: center;">
      <ul class="nav navbar-nav">
        <li ><a href="#">Home</a></li>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Get Help</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><span class="glyphicon glyphicon-search pull-right" aria-hidden="true" style="font-size:18px; display: inline-block;"></span></li>
      </ul>
    </div>

CSS：

  @media (min-width: 708px){
  .navbar-nav{
     float:none;
     margin: 0 auto;
     display: table;
     table-layout: fixed;
    }
  }

Answer 1

一个选项是在元素上添加“top”属性，然后为其提供负值以正确定位搜索图标。

.search {
  top: -50px;
  font-size: 18px;
}

如有必要，添加其他导航链接不会破坏风格。 See my plunker

此外，您可以取出HTML标记中的样式。

如何将bootstrap导航栏中心，还拉1个元素吧？

1 个答案: