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

J'ai essayé de faire une navigation inline liste. 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 de la LI. Voici l'extrait de code. Ce qui est mal à cela?

.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;
}
InformationsquelleAutor Luuk | 2010-02-19
  1. 66

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

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

    La première méthode permet d'avoir une façon dynamique centré sur la liste si vous en donnez la ul élément d'une largeur de 100% (de sorte qu'il s'étend à partir de la gauche au bord droit) et ensuite appliquer text-align: center.

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

    • merci beaucoup! M'a beaucoup aidé
    InformationsquelleAutor Tatu Ulmanen
  2. 10

    Inline ne doivent pas avoir une largeur. Vous devez utiliser display: block ou display:inline-block, mais ce dernier n'est pas pris en charge partout.

    InformationsquelleAutor Ikke
  3. 2

    Je pense que le problème est, que vous tentez de définir la largeur d'un élément inline dont je ne suis pas sûr, c'est possible. En général Li est bloquer et ce serait le travail.

    InformationsquelleAutor anthares
  4. 2

    À l'aide de la largeur ou de la hauteur sur des éléments en ligne n'est pas toujours une bonne idée.
    Vous pouvez utiliser display: inline-block au lieu

    InformationsquelleAutor Jeff Maes
  5. 1

    Supprimer la <br> de la .navcontainer-top li les styles.

    InformationsquelleAutor Paolo
  6. 0

    J'ai eu un problème similaire à essayer de réparer la taille de l'élément d'ajustement de l'image d'arrière-plan de la largeur. Cela a fonctionné (au moins avec Firefox 35) pour moi :

    .navcontainer-top li
{
  display: inline-block;
  background: url("../images/nav-button.png") no-repeat;
  width: 117px;
  height: 26px;
}
    InformationsquelleAutor Skippy le Grand Gourou