Flexbox的對齊項目

Question

我試圖對準6日，7日，8日，9日在Flex容器項目 得到這樣的：

[二路1號4 3TH 5 .......... ... 6日7日8日9時]。

我嘗試使用margin-right：auto，但它不適用於一組物品。

.upper_nav ul { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    list-style-type: none; 
 
} 
 

 
.upper_nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 0.6em; 
 
    font-size: 0.8em; 
 
    color: #4d4d4d; 
 
}

<nav class="upper_nav"> 
 
    <ul> 
 
    <li><a href="#Clients.html">Individual Clients</a></li> 
 
    <li><a href="#Companies">Companies</a></li> 
 
    <li><a href="#Corporations.html">Corporations</a></li> 
 
    <li><a href="#VIP.html">VIP</a></li> 
 
    <li><a href="#Private Banking.html">Private Banking</a></li> 
 

 
    <li><a href="#EN">EN</a></li> 
 
    <li><a href="#Order via Internet">Order via Internet</a></li> 
 
    <li><a href="#Contact">Contact</a></li> 
 
    <li><a href="#Sign in">Sign in</a></li> 
 
    </ul> 
 
</nav>

我完整的代碼是在這裏：https://codepen.io/mario1982/pen/wrELoB

Answer 1

是的它很容易，第6項應該得到 「保證金左：汽車」，而這一切。

Answer 2

您可以將導航分爲兩部分，並在容器上添加flexbox屬性以將它們分開。如果您想在將來添加項目到菜單中，您將不必擔心導致問題的nth-child。

.upper_nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.upper_nav ul { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    list-style-type: none; 
 
} 
 

 
.upper_nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 0.6em; 
 
    font-size: 0.8em; 
 
    color: #4d4d4d; 
 
}

<nav class="upper_nav"> 
 
    <ul> 
 
    <li><a href="#Clients.html">Individual Clients</a></li> 
 
    <li><a href="#Companies">Companies</a></li> 
 
    <li><a href="#Corporations.html">Corporations</a></li> 
 
    <li><a href="#VIP.html">VIP</a></li> 
 
    <li><a href="#Private Banking.html">Private Banking</a></li> 
 
    </ul> 
 
    <ul> 
 
    <li><a href="#EN">EN</a></li> 
 
    <li><a href="#Order via Internet">Order via Internet</a></li> 
 
    <li><a href="#Contact">Contact</a></li> 
 
    <li><a href="#Sign in">Sign in</a></li> 
 
    </ul> 
 
</nav>