Question

我怎样才能获得LI的100％高度，如下所示： 100% Height on LI

如您所见，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中添加“行”和“列”或“网格”部分，因为它们只是普通的GRID来自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标记。

Answer 2

这是一个没有链接样式的快速示例，但这就是我的工作方式。

http://jsfiddle.net/etienne_carre/ZVXFD/1/

确保ul没有pading和margin以及与header相同的高度。创建li与ul和header相同的高度。

Answer 3

display: table-cell;上的

LI可能有帮助

Answer 4

这对我有用：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>

Answer 5

你可以使用

display：inline-block

这是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度，顶部和底部边距以及填充。

有关内联阻止 here的利弊的更多信息，包括使用MS的缩放属性让它在IE7中运行的方法。

LI的100％高度

5 个答案: