Высота 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, так как они являются обычными 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

Теги height: 100% на вас не работают, потому что вы указали display: inline.Вы не можете установить высоту встроенного элемента.

Вам придется либо использовать display: inline-block, либо float: left, чтобы это работало.

Обратите внимание, что display: inline-block работает толькодля встроенных встроенных элементов в IE6-7, поэтому он не будет работать с тегами li в этих браузерах.

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>

Answer 3

display: table-cell; на LI может помочь

Answer 4

Вот краткий пример без стиля ссылки, но это то, как я это делаю.

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

Убедитесь, что у ul нет отступов и полей, и такая же высота, как узаголовок.После этого создайте ту же высоту, что и ul и header.

Answer 5

вы можете использовать

дисплей: встроенный блок

это способ сделать элементы встроенными, но сохранив их возможности блоков, такие как установка ширины и высоты, верхнего и нижнего полей и отступов.

Более подробная информация о плюсах и минусах встроенного блока здесь , включая способы заставить его работать в IE7 с помощью свойства MS zoom .