在窗口内均匀地进行空间导航（响应）

Question

我正在尝试将导航均匀地划分到页面顶部，同时消除左侧，右侧和每个链接之间的任何空白区域。我知道我可能只是使用Calc函数，但对旧版本的浏览器不够支持，所以我正在寻找另一种方法。

我目前的代码：

＆＃13;

＆＃13;

.nav {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #252839;
 }

.nav ul {
  list-style-type: none;
  width: 100%;
}

.nav ul li{
  color:  #b5b5b7;
  padding: 15px 0;
  font-size: 1.2em;
  display: inline-block;
}

.nav ul li:hover {
  background-color: #677077;
  color: #89C4F4;
}

＆＃13;

<div class="nav">
  <ul>
    <a href="#home"><li>Home</li></a>
    <a href="#profile"><li>Profile</li></a>
    <a href="#experience"><li>Experience</li></a>
    <a href="#abilities"><li>Abilities</li></a>
    <a href="#projects"><li>Projects</li></a>
    <a href="#contact"><li>Contact</li></a>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助！

Answer 1

使用display:flex和flex-grow: 1展开li元素，然后将a代码更改为display: block并将文本居中。

＆＃13;

＆＃13;

.nav {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #252839;
 }

.nav ul {
  list-style-type: none;
  width: 100%;
  padding: 0;
  display: flex;
}

.nav ul li{
  flex-grow: 1;
}

.nav ul li a {
  display: block;
  text-align: center;
  color:  #b5b5b7;
  font-size: 1.2em;
  padding: 15px 0;
}

.nav ul li a:hover {
  background-color: #677077;
  color: #89C4F4;
}

＆＃13;

<div class="nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#experience">Experience</a></li>
    <li><a href="#abilities">Abilities</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;