导航栏无法正确缩放

Question

我正在尝试制作导航栏，以便在缩小屏幕尺寸时，在每行上均匀显示4个链接

这里是全宽

Full Width

然而，当缩小窗口大小时，它似乎会逐个推下每个链接，这很麻烦（见下图）

Smaller size

这是代码

nav {
  background-color: #d6d6d6;
}

nav ul {
  margin: 0 0 2% 0;
  padding: 10px;
}

nav ul li {
  display: inline;
  margin: 0;
  width: 25%;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:not(:last-child) {
  border-right: 1px solid #919191;
  padding: 0 10px 0 10px;
}

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Sample link 1</a>
      <a href="#">Sample link 2</a>
      <a href="#">Sample link 3</a>
      <a href="#">Sample link 4</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Answer 1

以下是使用flexbox和@media查询的答案。正如您的问题中的评论所说，如果您添加更多链接，并且因为您的菜单不会换行直到屏幕宽度低于平板电脑尺寸（~768px），那么这可能是更好的解决方案。可以考虑添加一个汉堡包样式菜单，直到它到达桌面（~992px）。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

nav {
  background-color: #d6d6d6;
}

nav ul {
  margin: 0 0 2% 0;
  padding: 10px;
}

nav ul li {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

nav ul li a {
  text-decoration: none;
  display: inline-flex;
  flex: 1 1 25%;
  position: relative;
  padding: 0 10px;
}

nav ul li a:not(:nth-child(4n+4))::after {
  content: '';
  height: 100%;
  width: 1px;
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}

@media ( min-width: 768px) {
  nav ul li {
    flex-wrap: nowrap;
  }
  nav ul li a {
    flex: 0 0 auto;
  }
  nav ul li a:not(:last-child)::after {
    content: '';
    height: 100%;
    width: 1px;
    background-color: black;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
  }
}

＆＃13;

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Sample link 1</a>
      <a href="#">Sample link 2</a>
      <a href="#">Sample link 3</a>
      <a href="#">Sample link 4</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

这是你玩的小提琴。 https://jsfiddle.net/em71nvo0/