如何使可调整大小li元素与CSS仅

场景：我有一个无序列表< UL>宽度的（可以说200像素）四< LI>元素的大小相等。因此，每个应该是50px。当我添加第5个元素时，每个宽度都应该重新调整为40px。如果更改< UL>的宽度500像素用5 < LI>元素，每个< LI>元素应该是100像素。如何使可调整大小li元素与CSS仅

这是可能的只有CSS？如果是的话，它是如何实施的？

目前，我有满足上述要求的解决方案，但它包括jQuery来重新大小基于数学计算的< LI>元素。

感谢您的关注。

来源

2010-09-17 Julian

CSS可以做计算吗？ – NAVEED 2010-09-17 22:15:11

@halfdan - 接受他们，当他们合理和工作 – Julian 2010-09-17 22:20:19

@NAVEED - 我希望某种液体可调整大小的解决方案 – Julian 2010-09-17 22:20:55

Aparently你可以伪造像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

来源

2010-09-17 22:48:00 skajfes

在winXP和Safari 4 ...和+1上确认，给我留下了深刻的印象。 – 2010-09-17 23:32:48

它工作！谢谢！ – Julian 2010-09-18 00:23:42

你的问题对我来说并不完全合理。如果您将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>

来源

2010-09-17 22:27:23 JohnB

他说他希望列表是固定宽度，并且所有项目都占用该列表的相等部分，不管项目的数量如何。本质上，'ul li {width：（numberOfListItems/100）％;}'。 – Chuck 2010-09-17 23:01:21

使用CSS表达式是可能的，但CSS表达式具有非常沉重的性能损失。 JavaScript（和jQuery就此而言）是用来创建所需效果的适当工具。

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

来源

2010-09-17 22:35:28 Moses

直到为浏览器的实现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()进行互操作）。

来源

2010-09-17 23:02:59

如何使可调整大小li元素与CSS仅

回答

相关问题