如何根据语言选择将一个导航栏项对齐到两端？

Question

我有一个包含列表组件的div。我要做的是将最后一个li组件定位到div的末尾。

该网页有两个版本，阿拉伯语和英语，因此dir是根据选定的语言进行更改的。

​

​

​

#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/bootstrap@4.6.1/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>

​

Answer 1

使用display: flex和margin：左/右设置为您上一个子LI的auto (使用: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>

​

Answer 2

我试着用香草来解决。也许你可以在你的问题中修改这个解决方案。

我想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>

​

Answer 3

使用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;
 }