css - 如何将 div 中的 <li> 元素对齐到 div 的右侧？

Question

我正在尝试为我的网页制作母版页。我正在使用 HTML5 和 Bootstrap 框架。在页面顶部会有一个包含下拉菜单的栏，我想将此下拉菜单右对齐。

 <div class="navbar-collapse collapse" id="navbar-mobile">
        <ul class="nav navbar-nav" style="">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle " data-toggle="dropdown">Departments<span class="caret"></span></a>

                <ul class="dropdown-menu width-200">
                    <li class="dropdown-submenu">
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
        </ul>

我试过了

<style="float:right;">

但它没有用，我认为原因是下拉类不允许它工作。它与使用一起工作

<style="padding-left:680px;">

但我想这不是正确的方法，必须有更好的方法。另外，如果我使用“padding-left”并且我想在这个“li”元素的左侧添加一些东西，会发生什么情况？

这是我正在谈论的栏的屏幕输出。

问题是我该如何对齐？

谢谢

最好的问候

Answer 1

您可以使用 .pull-right 类到 ul 元素，它是 bootstrap 自带的。

HTML 示例

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

对于那些使用 Bootstrap 3 的人来说，.navbar-right 就可以了。

<ul class="nav navbar-nav navbar-right">

</ul>