如何根據語言選擇將一個導航欄專案對齊到任一端？

我有一個包含串列組件的 div。我想要做的是將最后一個 li 組件定位到該 div 的末尾。

該網頁有2個版本，阿拉伯語和英語，因此目錄會根據所選語言進行更改

#navbarSupportedContent .nav-item {
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
  border-right: 1px solid #01154D;
  padding: 10px 24px;
}

.navbar {
  padding: 0px !important;
}

 .navbar {
  position: relative;
  min-height: 40px !important;
  margin-bottom: 20px;
  border: none !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top" style="">
  <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto" style="/* float:inherit; */">
      <li class="nav-item active">
        <a class="nav-link" href="/webcenter/portal/ROPInternalPortal/pages_en">
          <span id="submenu1">Home</span>
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link nav-hover-fix" href="/webcenter/portal/ROPInternalPortal/pages_employeetools">
          <span id="submenu1">Employee Tools</span>
        </a>
      </li>
      <li class="nav-item ">
        <div class="dropdown show">
          <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
          <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/photogallery">PHOTO GALLERY</a>
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/news1">NEWS</a>
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/newpage">ROP MAGAZINE</a>
          </div>
        </div>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/webcenter/portal/ROPInternalPortal/pages_documents">
          <span id="submenu1">Documents</span>
        </a>
      </li>
      <li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">???????</span>
    <i aria-hidden="true" class="fa fa-language"></i></a>
      </li>
      <li class="nav-item" style=""><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-linkglyphicon glyphicon-log-out xf0 " 
    " onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
      </li>
    </ul>
    
    <span id="T:search2" class="x1a">
      <div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
      </div>
    </span>
  </div>
</nav>

uj5u.com熱心網友回復：

使用display: flexand margin: left/rightauto為您的最后一個子 LI 設定（使用:last-child選擇器） - 取決于dir="rtl"元素或檔案上存在的屬性

.navbar {
  padding: 0;
  list-style: none;
  display: flex;
  background: gold;
}

.navbar > * { padding: 0.5em 1em; }

.navbar > *:last-child {
  margin-left: auto;
}

[dir="rtl"] .navbar > *:last-child,
.navbar[dir="rtl"] > *:last-child {
  margin-right: auto;
  margin-left: 0;
}

<ul class="navbar">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul class="navbar" dir="rtl">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

uj5u.com熱心網友回復：

我嘗試用 vanillajs 解決。也許您可以在您的問題中調整此解決方案。

我想margin-inline-start這就是你要找的東西。

.element {
  display: flex;
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  justify-content: space-between;
  border: 1px solid #000
}

.item {
  padding: 1rem 1.4rem;
  background: #673AB7;
  color: #fff;
  font-size: 24px;
}
.item:last-child {
  margin-inline-start: auto;
}
   

<div class="wrapper">  
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <div class="element">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <div class="element" dir="rtl">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

uj5u.com熱心網友回復：

使用 Flexbox 將元素定位在左側，最后一個在右側

你所要做的就是添加下面的代碼因為你正在使用所有的引導類所以添加一個新類到 2 div 容器

# New Class
.Nav-container{
 display: flex;
 # Or without flex add only below property
 justify-content: flex-start;

為最后一個導航項或偽類添加了另一個類

 .last-item{
  justify-self: flex-end;
 }
  or
 .nav-item:nth-of-type(5){
   justify-self: flex-end;
 }

標籤：html css 引导程序 4

上一篇：位置：固定在移動設備上作業不正確

下一篇：使用flex和align問題將兩個元素定位在右側和一個左側