html - 创建一个导航栏，使用完整空间(css)的元素

Question

我不是使用 css 的专家，在这个问题上花费 1 小时后我会问社区。

我的 html 代码:

 <div class="content2">
    <div class="Menu">
        <a href="/all">All Investments (3)</a>
        <a href="/payouts">Payouts (0)</a>
    </div>
    ...some other code
 </div>

我的 CSS 代码:

.content2 {padding: 10px 30px; color: #fff}
.Menu {background: #022000; width: 1000px; height: 50px; margin: 20px auto; text-align: center}
.Menu a {float: left; height: 26px; width: 313px; padding: 12px 10px; color: #fff}
.Menu a:hover {background: #277521}

我希望我的菜单类中的两个元素完全填满导航栏的宽度。目前他们不占用导航栏的完整宽度。

Answer 1

使用width: 50%;并将padding修改为padding: 12px 0px;。

解释:

• width: 50% :由于有 2 个元素，这将使每个元素占据父元素宽度的 50%。

• padding: 12px 0px:左右填充 0px 有助于消除每个元素所需的额外空间。

.content2 {
  padding: 10px 30px;
  color: #fff
}
.Menu {
  background: #022000;
  width: 1000px;
  height: 50px;
  margin: 20px auto;
  text-align: center
}
.Menu a {
  float: left;
  height: 26px;
  width: 50%;
  padding: 12px 0px;
  color: #fff;
    background-color: yellow;
}
.Menu a:hover {
  background: #277521
}

<div class="content2">
  <div class="Menu">
    <a href="/all">All Investments (3)</a>
    <a href="/payouts">Payouts (0)</a>
  </div>
  ...some other code
</div>