Question

场景：我有一个无序列表＆lt; ul> 宽度（比方说200px），其中四个＆lt; li＆gt; 大小相同的元素。因此每个应该是50px。当我添加第5个＆lt; li＆gt; 元素每个宽度应重新调整为40px。如果我改变＆lt;的宽度ul＆lt; 到500px，5 ＆lt; li＆gt; 元素，每个＆lt; li＆gt; 元素应为100px。

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

目前，我有一个满足上述要求的解决方案，但它包含jQuery来重新调整＆lt; li> 基于数学计算的元素。

感谢您的关注。

Answer 1

显然你可以伪造像here这样的表，但我不确定这是否适用于所有浏览器（编辑：它适用于winxp ie8，chrome 7，firefox）。

<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上的示例here

Answer 2

你的问题对我来说并不完全有意义。如果您关闭width，则列表将尽可能宽。但这是你问题的一个问题：

<style type="text/css"> 
ul
{
  width:500px;
}
li
{
  width:100px;
}
</style>

<ul>
  <li>1. one</li>
  <li>2. two</li>
  <li>3. three</li>
  <li>4. four</li>
  <li>5. five</li>
</ul>

Answer 3

使用CSS表达式是可能的，但CSS表达式会带来非常严重的性能损失。 JavaScript（以及jQuery）是用于创建所需效果的合适工具。

CSS只应用于样式，HTML应仅用于结构，并且只要您想创建动态内容，就应该使用JavaScript。

Answer 4

在浏览器实现calc(), min() and max()功能之前，这在脚本（服务器，客户端，侧面）或使用表之外是不可能的。

目前，令人惊讶的是（可能只对我而言），Firefox，Webkit or Opera都不支持calc()功能，甚至不包括各种各样的供应商前缀。

那就是说，有一天像下面的可能会工作（但不是今天，可悲的是）：

ul {
  counter-reset: numListItems;
  width: 60%;
}

ul li {
  counter-increment: numListItems;
  width: calc(100%/numListItems);
}

但是，显然，对于工作的浏览器，需要在calc()范围内实现某些形式和理解变量，这似乎不一定是路线图（我不确定counter()是否可以与calc()互操作。）

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

4 个答案: