0

我想知道如何制作一个li自动适合固定大小容器的列表。

这是我的想法：

<div class="box">
   <ul>
       <li>#1</li>
       <li>#1</li>
       <li>#1</li>
       <li>#1</li>
       <li>#1</li>
       ...
   </ul>
</div>

让我们给 DIV ".box" 一个固定的大小 - width: 500px; 高度：560px；

那么如何让所有“li”动态改变高度和宽度以适应BOX？

PS li可以是 5 或 11 甚至 3，我希望所有的高度和宽度都li相同，这是设计的一部分

我找到了这个例子：http: //jsfiddle.net/eMLTB/3/

但仅适用于水平线。在我的情况下，它可以是 2 个甚至 3 个生的。

4

2 回答 2

0

设置li并display: block使用其中一些 css 重置文件从ul. 这将解决水平问题。对于垂直，您可以执行以下操作：

var containerHeight = parseInt($('.box').css('height'));
var liNum = $('li').length;
var liHeight = Math.floor(containerHeight / liNum);

$('li').css('height', liHeight);

测试：http: //jsfiddle.net/vSHYt/1/

请注意，在此示例中，我在li元素上使用了边框，并且边框被添加到它们的高度，这就是它们掉出容器的原因div。另外，我已经为 Chrome 使用了 reset，如果您使用其他浏览器，也许您会在 margin to 之前看到ul. 而且，当然，如果容器框的高度不能被li' 的数量整除，那么它们会少几个像素。

于 2013-08-15T08:14:04.473 回答
0

至于水平，您可以将 ul 元素 css 设置为显示类型 table，将 li 设置为显示类型 table-cell

ul {display:table; width:100%; height:100%}
li {display:table-cell;}

至于垂直我认为你可能需要添加 jQuery 来解决这个问题

于 2013-08-15T07:59:25.563 回答