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

Question

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

我无法通过第一部分，当我在其中一个li元素中有一个图像时，其他li元素不会扩展到相同的高度。

这是我的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;
}

我得到的是这个：

Answer 1

几个问题：

• 设置高度：

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

• 将内容对齐到底部：

将内容与底部对齐的最佳方法是将其放在绝对定位的容器中，并将“底部”设置为“0”。这可能会使您当前的标记复杂化，所以......

我的解决方案：

通过jQuery（或者你可以使用任何库或普通的javaScript）循环遍历所有的li并获取最高层的高度，并将其存储在变量中：

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

在获得最高的那个之后，再次循环通过li并设置一个顶部填充，其等于maxHeight（最高的li） - curent li的高度。这不仅会使所有li的高度相同，而且还会自动将内容与li的底部对齐：

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

我为你摆弄了这个：

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

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

希望有所帮助