Html LI 上的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8727950/
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
100% Height on LI
提问by oliverbj
How can I obtain to get LI's 100 % in height, just like this: 
我怎样才能获得 LI 的 100% 高度，就像这样：
As you can see, the borders on the LI elements are 100 % in height.
如您所见，LI 元素的边框高度为 100%。
Currently I have this:
目前我有这个：
<div class="header">
<div class="row">
<div class="column grid_13" style="padding-top:5px;">
<div class="logo"><a href="/"><img src="images/logosmall.png"></a></div>
</div><!-- End Grid_3 -->
<ul class="headerMenu">
<li>Profile</li>
<li><img src="images/icons/arrow-down.png" style="vertical-align:middle;"></li>
</ul>
</div><!-- End Row -->
</div><!-- End Header -->
This is my CSS. Please note I have not added the "Row" and the "column" or "grid" sections in the CSS, as they are just normal GRID's from 960.css
这是我的 CSS。请注意，我没有在 CSS 中添加“行”和“列”或“网格”部分，因为它们只是来自 960.css 的普通 GRID
.header{
background-image:url("../images/headerstyle.png");
background-repeat:repeat-x;
/* height:50px; */
height:60px;
border-color:#000;
border-width:0px 0px 1px 0px;
border-style:solid;
-moz-box-shadow: 1px 1px 4px 1px #232323;
-webkit-box-shadow: 1px 1px 4px 1px #232323;
box-shadow: 1px 1px 4px 1px #b6b6b6;
}
.headerMenu{
list-style-type:none;
margin:0;
padding:0;
}
.headerMenu li{
display:inline;
margin-bottom:10px;
color:#fff;
border-color:#086c8a;
border-width:0px 1px 0px 1px;
border-style:solid;
height:100%;
}
采纳答案by Etienne Carrier
Here is a quick example with no link style but this is how I do it.
这是一个没有链接样式的快速示例，但我就是这样做的。
http://jsfiddle.net/etienne_carre/ZVXFD/1/
http://jsfiddle.net/etienne_carre/ZVXFD/1/
Make sure the ul have no pading and margin and the same height as the header. After create the li the same height as the ul and header.
确保 ul 没有填充和边距，并且与标题具有相同的高度。创建与 ul 和标题相同高度的 li 之后。
回答by Leo
The height: 100%on you li tags doesn't work because you specified display: inline. You can't set the height of an inline element.
的height: 100%，因为你指定你李标签不起作用display: inline。您无法设置内联元素的高度。
You'll either have to use display: inline-blockor float: leftfor this to work.
你要么必须使用，display: inline-block要么float: left为此工作。
Note that display: inline-blockonly works on native inline elements in IE6-7, so it won't work with li tags in those browsers.
请注意，display: inline-block仅适用于 IE6-7 中的本机内联元素，因此它不适用于这些浏览器中的 li 标签。
回答by Jake
display: table-cell;on the LImight help
display: table-cell;对LI可能帮助
回答by tonco
This works for me: http://jsfiddle.net/tonco/UrhTw/2/
这对我有用：http: //jsfiddle.net/tonco/UrhTw/2/
<div>
<ul class="list">
<li class="item">
Test height<br />
size
</li>
<li class="sep">
<b></b>
</li>
<li class="item">
Test height<br />
size
</li>
<li class="sep">
<b></b>
</li>
<li class="item">
Test height<br />
size
</li>
</ul>
</div>
<style>
.list{
list-style: none;
display: inline-flex;
}
.item{
padding: 5px;
background: red;
}
.sep{
width: 1px;
margin: 5px 2px;
background: blue;
}
</style>
回答by Lars Tackmann
you could use
你可以用
display: inline-block
显示：内联块
it's a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings.
这是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度、顶部和底部边距和填充。
There is more info on the pros and cons of inline-blockhereincluding ways to get it working in IE7 using MS's zoomproperty.
目前，正在对利弊的详细信息inline-block的这里包括如何得到它在IE7使用MS的工作变焦性能。
