如何将 <li> 向右移动？答案

【问题标题】：How do I move a <li> to the right?如何将 <li> 向右移动？
【发布时间】：2015-03-16 14:20:36
【问题描述】：

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

【问题讨论】：

一般情况下，你可以在bootstrap中添加.pull-right

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：

【解决方案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

【讨论】：

那行不通。我认为我的 css 正在覆盖它或其他东西。你知道我对
- 所做的一些 css 会将其移动到右侧吗？
它在做什么/不做什么？
我放进去时什么都做不了

【解决方案3】：

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

想要出现在右侧的标签。（最好把它们放在最后一个

元素保持逻辑顺序。）

例如

动作

变成行动对您想要在右侧的任何元素重复此操作。它将覆盖定义的 float:left 默认值。

落下

动作

另一个动作

这里有别的东西

导航标题

单独的链接

另外一个单独的链接

【讨论】：