如何将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;">

但我认为这不是正确的做法，必须有更好的方法。如果我使用＆＃34; padding-left＆＃34;我想在这个＆＃34; li＆＃34;的左边添加一些东西。元件？

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

问题是我该怎么做这种对齐？

由于

祝你好运

Answer 1

您可以将.pull-right类用于引导程序附带的ul元素。

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>

Answer 2

要右对齐菜单，请使用.dropdown-menu-right。导航栏中右对齐的导航组件使用此类的mixin版本自动对齐菜单。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Answer 3

使用<div align="right">...</div>包裹您的下拉菜单，这样可确保下拉列表中的文字完全对齐。

Answer 4

您可以使用＆＃34; navbar-right＆＃34;班<ul class="nav navbar-nav navbar-right">。 我建议您查看引导文档并查看此链接bootstrap navbar component