如何對齊 <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"> 。 我建議您查看引導程序文檔並檢查此鏈接引導程序導航欄組件