html - 导航栏未正确缩放

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

* {
  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;
  }
}

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

这是供您演奏的 fiddle 。 https://jsfiddle.net/em71nvo0/