Html <li> 不会占据父元素 <ul> 的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17321657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<li> will not take 100% height of the parent <ul>
提问by KingsInnerSoul
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).
我在一行中<ul>有几个<li>项目。在<li>具有嵌套<span>和<img>。<img>所有项目的高度都相同。但是这些<span>项目包含的文本可以跨越一行或两行（取决于文本）。
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?
我曾尝试appying display:block，float:left，height:100%，和其他一些建议，我发现，但更短的<li>项目将不会采取相同的高度更高<li>的项目。所以我在较短的<li>项目下面留下了一个空间。有人对此有任何建议吗？
采纳答案by Joe_G
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:
在这种情况下，当您设置 height:100% 时，它不会从其父级继承任何高度。如果您希望列表项具有 div #wrapper 的 100% 高度，那么您应该将 ul 的高度设置为 100% 并在 div #wrapper 上设置一个高度（以像素或 em 为单位）：
#wrapper {
background: transparent;
width: 350px;
color: white;
height:250px;
}
#wrapper ul {
list-style-type: none;
display: block;
float: left;
background: green;
height: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:
如果您希望将其拉伸到浏览器窗口的整个高度，那么您需要将 css 中 html、body 的高度设置为 100%，然后将所有元素都设置为 li (html, body, div#wrapper、ul.list 和 li) 必须具有 100% 的高度：
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:
以下是您可能想查看的其他一些讨论此问题的链接：
回答by Claude Ricke
An easy fix is to add display:tableon your ul element. The hieght will align with the content.
一个简单的解决方法是添加display:table您的 ul 元素。高度将与内容对齐。
回答by Masoud
maybe it fix if you change list-style-positionof the container ul
如果您更改list-style-position容器 ul，也许它会解决
