J'essaie d'ajouter un width et un height personnalisés à l'élément de liste, mais je ne parviens pas à le faire.

HTML:

<div class="myclass">
    <ul>
        <li style="background-color:green;"><span class="myspanclass">0</span></li>
        <li class="liclass" style="background-color:green;">0</li>
    </ul>
</div>

Style:

Ci-dessous fonctionne:

.myclass ul {list-style-type:none; padding: 0px;}
.myclass li {display: inline; margin-right: 10px;}

Aucun des éléments ci-dessous ne fonctionne:

.myclass ul li {width:50px; height:50px;}
.myclass li {width:50px; height:50px;}
.liclass {width:50px; height:50px;}
.myspanclass {width:50px; height:50px;}

Qu'est-ce que je fais mal? Le li a une couleur d'arrière-plan verte et doit apparaître comme une boîte 50x50 comme défini dans le style css. Mais ça ne marche pas.

1
Somename 20 avril 2017 à 17:18

3 réponses

Meilleure réponse

Vous devez utiliser display: inline-block; au lieu de display: inline;

.myclass ul {
  list-style-type: none;
  padding: 0px;
}

.myclass li {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
<div class="myclass">
  <ul>
    <li style="background-color:green;"><span class="myspanclass">0</span></li>
    <li class="liclass" style="background-color:green;">0</li>
  </ul>
</div>
4
Chiller 20 avril 2017 à 14:20

Vous ne pouvez pas appliquer de largeur ou de hauteur aux éléments avec un affichage en ligne. Vous devrez utiliser display: block.

Comme d'autres l'ont suggéré, display:inline-block fonctionne également mais pas pour IE6 ou IE7.

1
Saeed Ludeen 20 avril 2017 à 14:23

Ça marche pour moi. Regarde ça.

.myclass ul li {
    width:50px;
    height:50px;
}

.myclass ul li:first-child {
    margin-bottom: 5px;
}

.myclass ul {
    list-style: none;
}
0
Umesh 20 avril 2017 à 14:42