CSS菜单甚至间距和大小

Question

我一直在破坏我的大脑，试图获得一个导航菜单，其中包含适当大小的动态标签/按钮。

因此，为了更好地解释我所拥有的是以下设置。

<div class="main-nav">

<ul>
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
</ul>

</div>

现在主导航有一个固定的宽度。我正试图让按钮填满导航的整个宽度。我试图在没有javascript的情况下这样做。我尝试了一些不同的东西但它似乎没有跨浏览器工作。特别是:(

有没有人实现这个目标？或者可以指出我正确的方向？

提前致谢。

Answer 1

为每个<li>指定25％的宽度和百分比宽度。每个<a>的百分比应为100％。应该这样做。

检查这个小提琴：http://jsfiddle.net/cxeJk/2/