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).
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?
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:
#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:
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:
An easy fix is to add display:table on your ul element. The hieght will align with the content.
maybe it fix if you change list-style-position of the container ul
来源：https://stackoverflow.com/questions/17321657/li-will-not-take-100-height-of-the-parent-ul