100% de la Hauteur sur les LI

Comment puis-je obtenir pour obtenir LI 100 % en hauteur, juste comme ça: 100% de la Hauteur sur les LI

Comme vous pouvez le voir, les frontières sur la LI éléments sont 100 % en hauteur.

Actuellement j'ai ceci:

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

C'est mon CSS. Veuillez noter que je n'ai pas ajouté de "Ligne" et "colonne" ou "grille" dans le CSS, car ils sont tout à fait normal de la GRILLE à partir de 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%;  
}

Ne trouvant UL ont tout de rembourrage?
La enfermant? L'UL de classe .headerMenu, et il faut padding:0
ce que vous essayez d'accomplir. À partir de la capture du code on dirait que vous êtes imitant une table avec des divs et d'une ligne et d'essayer d'avoir une liste non ordonnée que dans les rangs. Êtes-vous désireux de l'UL d'avoir 100% de la hauteur de la <div class="row"> élément?
désolé pour cette méta question, mais où est cette capture d'écran?
C'est à partir de Dribbler.

OriginalL'auteur oliverbj | 2012-01-04

1

Voici un exemple rapide avec pas de lien de style mais voici comment je le fais.

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

Assurez-vous que l'ul ont pas pading et de la marge et de la même hauteur que l'en-tête. Après avoir créer la li la même hauteur que l'ul et de l'en-tête.

parole de conseils, jsfiddle a un panneau pour le css, vous n'avez pas à mettre le css dans le html panneau

OriginalL'auteur Etienne Carrier
10

La height: 100% sur vous li balises ne fonctionne pas parce que vous avez spécifié display: inline. Vous ne pouvez pas régler la hauteur de l'élément inline.

Vous devrez utiliser display: inline-block ou float: left pour que cela fonctionne.

Noter que display: inline-block ne fonctionne que sur les éléments inline dans IE6-7, de sorte qu'il ne fonctionne pas avec les balises li dans ces navigateurs.

OriginalL'auteur Leo
1

display: table-cell; sur le LI pourrait aider

OriginalL'auteur Jake

Cela fonctionne pour moi: 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>

OriginalL'auteur tonco

0

vous pouvez utiliser

display: inline-block

c'est une façon de rendre les éléments inline, mais en préservant leur bloc de fonctions telles que le réglage de la largeur et de la hauteur, en haut et en bas les marges externes et internes.

Il n'y a plus d'infos sur les avantages et les inconvénients de inline-block ici y compris les moyens de le faire fonctionner dans IE7 à l'aide de MS de zoom propriété.

OriginalL'auteur Lars Tackmann

Vous devez vous connecter pour publier un commentaire.