等距列表项（垂直对齐）

我有一个高度为325px的div中的12个链接的列表。是否有一种方法可以垂直平均分配列表，以填充整个div盒的高度？就像一个垂直的理由。等距列表项（垂直对齐）

我试过指定行高，所以它达到了完整的325像素的高度，但它的关闭了几个像素，它是窃听我。

我希望这是明确的......谢谢！

编辑

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

2012-03-02 Kudra Ilse

你能证明你有什么这么远吗？ http://jsfiddle.net/。你需要支持IE7吗？ – thirtydot 2012-03-02 22:39:31

我希望它看起来像这样：http://jsfiddle.net/WwgSn/ 该列表必须与其旁边的图像对齐。但是我能做到的唯一方法就是用绝对定位和线高度的小数点值来伪造它，这不是一个真正的解决方案。向下/向上舍入行高值最终将其关闭几个像素，并使布局看起来很糟糕。微克。 – 2012-03-03 07:16:42

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

最简单的答案是将325除以12（即27.0833333）。然后将其设置为“高度”和“行高”（舍入为27）。

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

让我知道如果你想设置一个特定的高度上各< LI>，公式想出确切的保证金之间的每个< LI>是一个微妙的技巧。

来源

2012-03-02 23:45:52 kdub

我想我的意思是，使用你的jsfiddle例子，我希望link1位于div盒的最顶端，link12要对齐div的底部，所有链接均匀间隔。列表顶部和底部的文本将与其旁边的深灰色框的顶部和底部处于相同的“级别”。我现在认为有没有真正的方法来做到这一点线高度，我必须以另一种方式伪造。只是网站设计是基于网格的，所以任何小的错位都非常明显。 – 2012-03-03 07:03:40

好吧，我有这个js小提琴：http://jsfiddle.net/tETcW/60/，但最后一个链接下面可能有1px ...我不会花太多时间试图让它比这更好...如果你确实需要它，使用定位，绝对或相对每个链接，并做数学找到确切的坐标。或者使用JavaScript为你做 – kdub 2012-03-03 07:31:21

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

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

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

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

来源

2012-11-25 05:45:21

等距列表项（垂直对齐）

回答

相关问题