&lt; li&gt;不会占用父代<ul>的100％高度 [英] &lt;li&gt; will not take 100% height of the parent &lt;ul&gt;

问题描述

我有一个< ul> 在一行中有几个< li> 项。 < li> 具有嵌套的< span> 和< img> 。 < img> 的高度在所有项目中都相同。但是< span> 项包含可以跨一行或两行的文本（取决于文本）。

I have a <ul> with several <li> items in it all in a single row. The <li> has a nested <span> and an <img>. The <img> height is all the same across all items. But the <span> items contain text which can span on a single line or two lines (depends on text).

我尝试应用 display：block ， float：left ， height：100％和我发现的其他建议很少，但较短的< li> 项目将高度与< li> 物品的高度不同。因此，在较短的< li> 项下方留有一个空格。
有人对此有任何建议吗？

I have tried appying display:block, float:left, height:100%, and few other suggestions I found, but the shorter <li> items will not take the same height as the taller <li> items. So I am left with a space below the shorter <li> items. Anyone has any suggestions on this?

推荐答案

在这种情况下，当您将height：100％设置为'从其父级继承任何高度。如果希望列表项具有div #wrapper的高度的100％，则应将ul的高度设置为100％，并在div #wrapper上以像素或em的高度设置：

In this case, when you set height:100% it isn't inheriting any height from its parent. If you want the list items to have 100% height of the div #wrapper, then you should set the ul's height to 100% and set a height on the div #wrapper in pixels or em's:

http://jsfiddle.net/SF9Za/1/

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

如果您希望将其扩展到浏览器窗口的整个高度，那么您需要将css中的html，body的高度设置为100％，然后向下到li的所有元素（html，body，div＃wrapper，ul.list和li）的高度都必须为100％ ：

If you'd rather have it stretch to the full height of the browser window, then you need to set the height of html, body in your css to 100%, and then all of the elements down to the li (html, body, div#wrapper, ul.list, and li) must have 100% height:

http://jsfiddle.net/YdGra/

html, body{
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

以下是您可能想要查看的其他一些链接：

Here's some other links that you might want to check out that talk about this:

• CSS 100 ％高度布局


• 设置高度：100我的标签元素上的％无效


• http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

• CSS 100% height layout
• Setting height: 100% on my label element doesn't work
• http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

这篇关于&lt; li&gt;不会占用父代<ul>的100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！