Question

我试图将flex容器中的第6，第7，第8，第9项对齐得到这个：

[1th 2th 3th 4th 5th ............. 6th 7th 8th 9h]。

我尝试使用margin-right：auto但它不适用于一组项目。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我的完整代码在这里：https://codepen.io/mario1982/pen/wrELoB

Answer 1

您可以将导航分为两部分，并在容器上添加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>

Answer 2

是的，这很简单，第6项应该是“margin-left：auto”，就是这样。

FlexBox对齐项目

2 个答案: