等距列表项(垂直对齐)

时间:2021-11-15 20:23:17

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


0  

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)。

  • 高度和行高设置为它(向下舍入到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


    0  

    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/

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

    #1


    0  

    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)。

  • 高度和行高设置为它(向下舍入到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


    0  

    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/

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