如何展开我的网站菜单来填充它所在的div？

Question

我被困在某件事上有一段时间了，我希望这件事很容易解决。

我有一个菜单从css播放，我已经编辑。我想在我的主体div (980px宽)中将其设置为全宽，并将菜单标题展开以填充空间。

目前，它只是居中，菜单的两边都有空隙。

我把它放在这里，这样你就能明白我的意思了！http://nugrafik.com/menu_test_delete.html

我试过通过摆弄页边距/填充等方式作弊，但看起来总是不太对劲。

有人能帮上忙吗？

CSS：

.menu {display:inline-block;}
.menu {display:inline;}
.holder {display:table;}

.menu {
display:table-row;
padding:0;
margin:0;
list-style-type:none;
white-space:nowrap;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
 }
.menu li {display:inline;}
.menu a, .menu a:visited {
display:block;
float:right;
padding:3px 11px;
color:#666666;
background:#e0e0e0;
border:1px solid #fff;
text-decoration:none;
 }
.menu a:hover {
color:#fff; 
background:#c1d045;
}

#wrapper2 {
text-align:center;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
}
#wrapper2 .holder {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
}       
#mainbody {
background-color: #66CCFF;
height: 400px;
width: 980px;
margin-right: auto;
margin-left: auto;
}

HTML：

<body>
<div id="mainbody">
<div id="wrapper2">
<div class="holder">
<ul class="menu">
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Links</a></li>
<li><a href="#nogo">Scholarships</a></li>
<li><a href="#nogo">Organizers</a></li>
<li><a href="#nogo">Abstracts</a></li>
<li><a href="#nogo">Accommodation</a></li>
<li><a href="#nogo">Venue</a></li>
<li><a href="#nogo">Scientific Program</a></li>
<li><a href="#nogo">Home</a></li>
</ul>
</div>
</div>
</div>
</body>

Answer 1

1)在.holder中去掉display: table;。

2)去掉.menu中的display: table-row; (更好地利用您设置为.menu的所有display

3)去掉.menu li的display: inline;并添加float: left; width: 11.11%;。11.11%是100/9，让你所有的项目都有相同的宽度。否则手动设置每一项的宽度，因为否则浮动它们(或者像你做的那样以内联方式显示)，它们将使用所需的宽度，并且你的菜单不会是100%宽度。

Answer 2

在你的css中写下：

#wrapper2 {
    background:#E0E0E0;
    overflow: hidden;
    text-align: center;
}

Answer 3

应用sandeep的建议后，再增加每个菜单项的左/右填充(16px对我来说似乎是右边的……它比你现在的11px更接近)，然后向最左边和最右边的菜单项添加特殊的类，以分别删除左边和右边的边框，这样最左边的菜单项就没有左边界，最右边的菜单项就没有右边界。

这可能仍然不是您想要的，计算出的菜单项宽度是流动的，但正如您所看到的，它们不能均匀分布并完全均匀地填充宽度，而不是更少和更多，因此左侧和右侧菜单项将比其他菜单项稍大。无论如何，这可能还不足以引起注意。

编辑:我没有考虑到11.1%的宽度。这会让你填满整个宽度。