html - LI 上的 100% 高度

Question

我怎样才能得到LI的100%高度，就像这样:

如您所见，LI 元素的边框高度为 100%。

目前我有这个:

<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 -->

这是我的 CSS。请注意，我没有在 CSS 中添加“行”和“列”或“网格”部分，因为它们只是来自 960.css 的普通网格

.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%;  
}

Answer 1

li 标签上的 height: 100% 不起作用，因为您指定了 display: inline。您不能设置内联元素的高度。

您必须使用 display: inline-block 或 float: left 才能工作。

请注意，display: inline-block 仅适用于 IE6-7 中的原生内联元素，因此它不适用于这些浏览器中的 li 标签。