如何使用CSS制作可调整大小的li元素

Question

场景:我有一个无序列表<ul>的宽度(比方说200px),其中四个<li>元素的大小相等.因此每个应该是50px.当我添加第5个<li>元素时,每个宽度应重新调整为40px.如果我用5 <li>元素将<ul>的宽度更改为500px ,则每个<li>元素应为100px.

这只能用CSS吗？如果是,它是如何实施的？

目前,我有一个满足上述要求的解决方案,但它包含jQuery,可以根据数学计算重新调整<li>元素的大小.

感谢您的关注.

Answer 1

Aparently你可以假表像这里,但我不知道,如果这个工程在所有浏览器(编辑:它工作在WinXP IE8,Chrome的7,火狐).

<div id="menu">
    <ul>
        <li>
            <a href="...">...</a>
        </li>
        <!-- other list items -->
    </ul>
</div>

#menu {
    display: table;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
}

这里也是关于fiddle.net的例子