等距列表項（垂直對齊）

我有一個高度爲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

等距列表項（垂直對齊）

回答

相關問題