如何对齐 <li> 在div右侧的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类对bootstrap随附的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

您可以使用“ navbar-right”类<ul class="nav navbar-nav navbar-right"> 。 我建议您查看引导程序文档并检查此链接引导程序导航栏组件