html - 由列表组成的菜单栏中元素的宽度

Question

我的网站上有一个由列表组成的菜单栏。 html 看起来像这样:

<div id="menu">
  <ul class="menu">
   <li class="menu"><a class="menu" href="#">HOME</a></li>
   <li class="menu"><a class="menu" href="#">MOSAIC</a></li>
   <li class="menu"><a class="menu" href="#">SUCCESS</a></li>
   <li class="menu"><a class="menu" href="#">MEMBERS</a></li>
   <li class="menu"><a class="menu" href="#">CONTACT</a></li>
  </ul>
</div>

CSS 看起来像这样:

#menu {
    margin-left: 10%;
    border-top:1px solid white;
    border-bottom:1px solid white;
    left:0;
    width:80%;
    height:2.2em;
    background:#576361;
    overflow:hidden;
    position:absolute;
}

ul.menu {
    float:middle;
    width:100%;
    padding:0;
    margin:0 auto;
    list-style-type:none;
}

a.menu {
    text-align:center;
    float:left;
    width:20%;
    height:1.8em;
    text-decoration:none;
    color:white;
    background-color:#576361;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    border-left:1px solid white;
}

现在我的菜单栏如下所示:

它只占用站点宽度的 80%，但 5 个元素并没有像预期的那样占用 80% 的 20%。我该如何解决我的问题？如果你能向我解释正确答案是如何工作的，如果它不是显而易见的和 self 解释的，那将是非常棒的。

Answer 1

我的意见是使用 table-cell 并在 li 元素中应用样式，而不是像这样在子元素中应用样式:

#menu {    
    border-top:1px solid white;
    border-bottom:1px solid white;
    left:0;
    width:80%;
    height:2.2em;
    background:#576361;
    position:relative;
    margin: 0 auto;
}

ul.menu {
    width:100%;
    padding:0;
    margin: 0 auto;
    list-style-type:none;
}

ul{
    display:table;
}

li{
    display:table-cell;
    text-align:center;
    width:20%;
    height:1.8em;
    text-decoration:none;
    color:white;
    background-color:#576361;
    padding:0.2em 0.6em;
    border-left:1px solid white;
    vertical-align: middle;
}

fiddle