100%高度在LI上

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中添加“Row”、“Column”或“Grid”部分，因为它们只是来自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%;  
}

- oliverbj

---

包含的 UL 元素是否有任何填充？ - DGM

封闭的是什么？UL类是.headerMenu，并且它具有padding:0。 - oliverbj

你想要实现什么目标？从代码片段来看，你似乎在用 div 和一行来模拟一个表格，然后尝试在该行中放置一个无序列表。你是想让 UL 的高度与 <div class="row"> 元素的高度相同吗？ - Brian

抱歉问这个元问题，那个截图来自哪里？ - sascha

Answer 1

你在li标签上指定了display: inline，导致height: 100%无效。内联元素的高度无法设置。

为使此功能生效，您必须使用display: inline-block或float: left。

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

- Leo

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

- tonco

---

JS Fiddle是一个无效的链接。 - undefined

Answer 3

在 LI 元素上使用 display: table-cell; 可能会有帮助。

- Jake

Answer 4

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

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

确保ul没有填充和边距，并且与标题具有相同的高度。创建li后，其高度与ul和标题相同。

- Etienne Carrier

---

建议：jsfiddle有一个CSS面板，您不必把CSS放在HTML面板中。 - Purefan

Answer 5

你可以使用

display: inline-block

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

关于inline-block在这里有更多的优缺点信息，包括使用微软的zoom属性在IE7中实现它的方法。

- Lars Tackmann