如何均匀填充宽度？

Question

我想在简单的导航栏上放置分隔元素的边框。但边框出现在错误的位置。

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border: 1px solid #100;
}

nav {
  background: bisque;
}

li a {
  text-decoration: none;
  color: #100;
  line-height: 3rem;
  font-size: 2rem;
}

li {
  border-right: 1px solid #100;
}

<nav>
  <ul>
    <li><a href="go.html">Home</a></li>
    <li><a href="go.html">Extra</a></li>
    <li><a href="go2.html">Food</a></li>
    <li><a href="go2.html">Drinks</a></li>
    <li><a href="go2.html">About</a></li>
  </ul>
</nav>

我想要一个边框出现在元素之间所有空间的中间。

Answer 1

列表项目前无法增长。改变

li

的风格应该会有所帮助：

li{
    border-right:1px solid #100 ;
    flex: 1 0 auto;
}