Question

我在<ul>中有一些东西，但我需要最后一个一直到右边。我怎么把它放在那里？（我需要下拉菜单向右移动。）

  <ul class="nav navbar-nav">
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="nav-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

Answer 1

将其拆分为两个导航栏：一个位于左侧，另一个位于pull-right右侧：

<ul class="nav navbar-nav">
  <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
  <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
</ul>
<ul class="nav navbar-nav pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li class="nav-header">Nav header</li>
      <li><a href="#">Separated link</a></li>
      <li><a href="#">One more separated link</a></li>
    </ul>
  </li>
</ul>

查看Bootstrap示例站点的示例：http://examples.getbootstrap.com/navbar-fixed-top/index.html

Answer 2

<div class="container">
  <ul class="nav navbar-nav">
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
      <!--// add a class of .pull-right //-->        
     <li class="dropdown pull-right ">  
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="nav-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</div>

DEMO

Answer 3

HTMl和CSS相对较新，但我解决了类似的问题而无需制作重复的菜单栏。简单地说，浮动：正确;＆＃39;在

tage中，您希望显示在右侧。（最好将它们作为维持逻辑顺序的最后一个

元素。）

例如，

动作

变行动对右侧所需的任何元素重复此操作。它将覆盖定义的float：left default。

落下

动作

另一个动作

其他地方

导航标题

分隔链接

另外一个单独的链接

如何将<li>移到右侧？</li>

3 个答案: