Question

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

这是我的想法：

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

让我们给DIV“.box”一个固定大小 - 宽度：500px;身高：560px;

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

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

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

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

Answer 1

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

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

关于纵向我认为您可能需要添加jQuery来解决问题

Answer 2

将li设置为display: block并使用some of these css reset files从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，如果您使用其他浏览器，也许您会在保证金之前看到ul。当然，如果容器盒的高度不能被li的数量整除，它们将会缩短几个像素。

如何使li元素在固定大小的容器内适合水平和垂直？

2 个答案: