无法使导航宽度正常工作

Question

我仍然处于学习 HTML 和 CSS 的初级阶段，如果这是一个简单的解决方法，请原谅我，但我还没有看到任何东西可以回答这个问题。 所以我试图获得同样大小的导航链接——我只有 4 个链接，将宽度设置为 25% 似乎不起作用。从阻止到更改字体大小，我已经搞砸了一切，无论我做什么，导航都会溢出，而不是像这样停留在一行：

在 Chrome 和 Firefox 中看起来都是这样，我还没有费心测试其他浏览器。这是我的代码：

<div class="nav">
        <div class="navbar">
        <a class="active" href="index.html"><i class="fa fa-fw fa-home"></i> Home</a>
        <a href="portfolio.html"><i class="fa fa-folder-open"></i> Portfolio</a>
        <a href="about.html"><i class="fa fa-user"></i> About</a>
        <a href="contact.html"><i class="fa fa-envelope"></i> Contact</a>
        </div>
    </div>

还有我的 CSS：

    .nav {
    background-color: #fff;
    padding: 5px;
    border-bottom: 1px solid #a0a0a0;
    width: 100%;
}

.navbar {
    width: 100%;
    background-color: #fff;
    overflow: auto;
  }
  
  .navbar a {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 5px;
    float: left;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 16px;
    width: 25%;
  }
  
  .navbar a:hover {
    color: #fb4c1f;
  }
  
  .navbar a.active {
    background-color: #fb4c1f;
    color: white;
  }
  

  @media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
      width: 100%;
    }
  } 

我很确定我的导航 div 也是多余的，但我目前并不完全专注于此。现在我只想弄清楚这些链接！

Answer 1

您有一点内边距，可以将项目加宽 20 像素。您可以使用calc(25% - 20px) 来解决这个问题，如下所示：

.nav {
  background-color: #fff;
  border-bottom: 1px solid #a0a0a0;
  width: 100%;
}

.navbar {
  width: 100%;
  background-color: #fff;
  overflow: auto;
}

.navbar a {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 5px;
  float: left;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 16px;
  width: calc(25% - 20px);
}

.navbar a:hover {
  color: #fb4c1f;
}

.navbar a.active {
  background-color: #fb4c1f;
  color: white;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
  }
}

<div class="nav">
  <div class="navbar">
    <a class="active" href="index.html"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="portfolio.html"><i class="fa fa-folder-open"></i> Portfolio</a>
    <a href="about.html"><i class="fa fa-user"></i> About</a>
    <a href="contact.html"><i class="fa fa-envelope"></i> Contact</a>
  </div>
</div>