javascript - 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% 的百分比。应该这样做。

检查这个 fiddle :http://jsfiddle.net/cxeJk/2/