la largeur / hauteur de l'élément de liste css ne fonctionne pas

Question

J'ai essayé de faire une liste de navigation en ligne. Vous pouvez le trouver ici: http://www.luukratief-design.nl/dump/parallax/para.html

Pour une raison quelconque, il n'affiche pas la largeur et la hauteur du LI, voici l'extrait. Pouvez-vous me dire ce qui ne va pas?

 .navcontainer-top li {
 font-family: "Verdana", sans-serif;
 margin: 0;
 padding: 0;
 font-size: 1em;
 text-align: center;
 display: inline;
 list-style-type: none;<br>
 width: 117px;
 height: 26px;
}


.navcontainer-top li a {
 background: url("../images/nav-button.png") no-repeat;
 color: #FFFFFF;
 text-decoration: none;
 width: 117px;
 height: 26px;
 margin-left: 2px;
 margin-right: 2px;
}
.navcontainer-top li a:hover {
 background: url("../images/nav-button-hover.png") no-repeat;
 color: #dedede;
}
 

Answer 1

Déclarer l' a de l'élément display: inline-block et chute de la largeur et de la hauteur de l' li élément.

Alternativement, appliquer un float: left de la li élément et utiliser display: block sur le a élément. C'est un peu plus de la croix-navigateur compatible, en display: inline-block n'est pas prise en charge dans Firefox <= 2 par exemple.

La première méthode permet d'avoir une façon dynamique centrée liste si vous donnez l' ul élément d'une largeur de 100% (de sorte qu'il s'étend de gauche à droite bord) puis appliquez text-align: center.

Utiliser line-height pour contrôler le texte de Y-position à l'intérieur de l'élément.

Answer 2

Les éléments en ligne ne peuvent pas avoir de largeur. Vous devez utiliser display: block ou display:inline-block , mais ce dernier n'est pas pris en charge partout.

Answer 3

Je pense que le problème est que vous essayez de définir la largeur à un élément en ligne qui, je ne suis pas sûr, est possible. En général, Li est bloqué et cela fonctionnerait.

Answer 4

Utiliser largeur / hauteur sur des éléments en ligne n'est pas toujours une bonne idée. Vous pouvez utiliser display: inline-block place

Answer 5

Supprimez les <br> des styles .navcontainer-top li .