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

【问题标题】：How to make li elements fit horizontal and vertical inside a fixed size container?如何使 li 元素在固定大小的容器内水平和垂直适合？
【发布时间】：2013-08-15 07:45:30
【问题描述】：

我想知道如何制作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 个 raws。

【问题讨论】：

你如何计算出每行需要多少 li？
嗯，我想它一定是自动的！我知道这是可能的，前段时间我在网上遇到了这样的例子，它是用 Jquery 完成的。现在我找不到它...
我要的是实现细节，不能是“自动”。实现为什么要创建第二行？

标签： javascript jquery html css

【解决方案1】：

至于水平你可以设置ul元素css显示类型table和li显示类型table-cell

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

至于垂直，我认为您可能需要添加 jQuery 来解决问题

【讨论】：

【解决方案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 使用了 reset，如果您使用的是其他浏览器，也许您会看到 ul 之前的边距。当然，如果容器框的高度不能被li 的数量整除，它们就会少几个像素。

【讨论】：