li元素不扩展到ul元素的高度当一个li元素推高ul的高度

我试图让我所有的li元素占据包含它们的ul元素的整个高度，然后将所有的li元素内容对齐到底部。li元素不扩展到ul元素的高度当一个li元素推高ul的高度

我不能通过第一部分，当我有一个图像在其中一个李元素其他李元素不会展开为相同的高度。

这里是我的html

<nav id="sliderNav"> 
<ul id="sliderWrap"> 
     <li>wow 1</li> 
     <li>wow2<br /> cool 
     </li> 
     <li> 
      <img src="blank-trans.png" width="290" height="417" /> 
     </li> 
     <div class="clearfloat"></div> 
    </ul> 
</nav>

我简单的CSS是

#sliderNav{ 
    text-align:center; 
    background-color:#000; 
} 
#sliderNav ul{ 
    list-style:none; 
    display:inline-block; 
    background-color:#0F0; 
    height:100%; 
} 
#sliderNav ul li{ 
    display:block; 
    float:left; 
    height:100%; 
    background-color:#C3C; 
}

什么，我得到的是这样的： Image showing the problem

来源

2012-07-18 AAron B

如果你不绝对需要#slidernav UL是高度：100％，而是它似乎要工作一个特定的像素数量。 – DaiYoukai 2012-07-18 00:31:57

问题是我并不总是知道图片高度会是什么，因此我无法设置高度，因为它可能会改变 – 2012-07-18 01:58:35

几个问题：

Setti高度：

如果元素的高度没有明确设置的高度，则无法将元素的高度设置为100％。

对齐内容的底部：

的最佳方式对齐内容的底部是把它在绝对定位的容器，并设置“底部”为“0”。这可能是与你当前的标记复杂的事情，所以......

我的解决办法：

通过jQuery（或者你可以使用任何图书馆或普通的JavaScript）遍历所有李时珍和抢一个最高的高度再次

maxHeight = 0; 
$("li").each(function() { 
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); 
})

后你会得到最高的一个，通过李的循环，并设置一个最高填充它等于maxHeight（最高丽） - CURENT李的高度，并将其存储在一个变量。这不仅让所有的利是相同的高度，但它也将自动对齐内容到李的底部：

$("li").each(function() { 
    $(this).css('padding-top', maxHeight - $(this).height() + 'px'); 
})

我已经摆弄这个给你：

http://jsfiddle.net/egrBV/2/

我为li添加了一个正确的边框，这样你就可以看到它们是如何分开的。

希望帮助

来源

2012-07-18 01:02:38 Sammy

哇，感谢您的快速反应....有谁知道只有CSS的方式来完成这个因为即使有人关闭了javascript，我也想看看它 – 2012-07-18 01:57:47

li元素不扩展到ul元素的高度当一个li元素推高ul的高度

回答

相关问题