等距列表项（垂直对齐）

I have a list of 12 links in a div with a height of 325px. Is there a way to equally distribute the list vertically so that it fills up the entire height of the div box? Like a vertical justify.

我有一个div的12个链接列表，高度为325px。有没有办法平均分配列表，以便填充div框的整个高度？就像一个垂直的辩护。

I've tried specifying the line-height so it reaches the full 325px height, but it's off by a few px and it's bugging me.

我已经尝试指定行高，因此它达到了完整的325px高度，但它已经关闭了几个px而且它让我烦恼。

I hope this is clear...thanks!

我希望这很清楚......谢谢！

EDIT

编辑

I want it to look like this: http://jsfiddle.net/WwgSn/ but with less dumb code!

我希望它看起来像这样：http：//jsfiddle.net/WwgSn/但代码较少！

2 个解决方案

#1

A lot will depend on how you want the links to look. For example, do you want each of the 12 links to have a background color. Do you want the links to have a border? If you want the links to have a background or border (or both), do you want there to be a specific height of the links, so there can be spacing between them?

很多将取决于您希望链接的外观。例如，您希望12个链接中的每个链接都具有背景颜色。你想要链接有边框吗？如果您希望链接具有背景或边框（或两者），您是否希望链接具有特定高度，因此它们之间可以有间距？

The simplest answer is to divide 325 by 12 (which is 27.0833333). And then set the <li> height and line-height to it (round down to 27).

最简单的答案是将325除以12（即27.0833333）。然后将

高度和行高设置为它（向下舍入到27）。

Here is a simple jsfiddle of it: http://jsfiddle.net/tETcW/43/

这是一个简单的jsfiddle：http：//jsfiddle.net/tETcW/43/

Let me know if you wanted to set a specific height on each <li>, the formula for coming up with the exact margin-between each <li> is a smidge trickier.

让我知道，如果你想在每个

上设置一个特定的高度，那么在每个

之间提出精确边距的公式就会变得更加棘手。

#2

I put together some JS that dynamically set the height of the li's. It means that its all calculated and works of parent divs height.

我把一些动态设置li的高度的JS放在一起。这意味着它的所有计算和父div的工作高度。

var foo = $(".parentDiv").height(),
    bar = $("ul li"),
    baz = foo / bar.length;

bar.each(function(){
    $(this).height(baz);
});

http://jsfiddle.net/tETcW/65/

#1