Html 100%身高

我怎样才能得到李宇春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 -->

你可以用

显示：内联块

这是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度、上下边距和填充

---

关于内联块的优点和缺点，还有更多信息，包括使用MS的zoom属性使其在IE7中工作的方法。

由于您指定了

显示：内联，因此li标记上的
高度：100%
无效。不能设置内联元素的高度

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

请注意，
display:inline block
仅适用于IE6-7中的本机内联元素，因此它在那些浏览器中不适用于li标记。
这里是一个没有链接样式的快速示例，但我就是这样做的


确保ul没有衬垫和边缘，且高度与收割台相同。创建与ul和页眉高度相同的li后。
显示：表格单元格LI上的code>可能有帮助
这对我很有用：




测试高度

大小




测试高度

大小




测试高度

大小


.名单{
列表样式：无；
显示：内联flex；
}
.项目{
填充物：5px；
背景：红色；
}
九月{
宽度：1px；
保证金：5px2px；
背景：蓝色；
}
封闭式UL是否有任何填充物？封闭式UL是否有任何填充物？UL类是.headerMenu，它有填充：0您试图实现什么。从代码剪切图上看，您似乎在模拟一个包含div和一行的表，然后尝试在该行中创建一个无序列表。你想让UL有100%的元素高度吗？很抱歉这个元问题，但是屏幕截图是从哪里来的？我的建议是，JSFIDLE有一个css面板，你不必把css放在html面板中
.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%;  
}

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