1
votes

CSS - Faire en sorte que les éléments de la liste aient une couleur d'arrière-plan et une largeur égale à leur contenu

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

li {
  background-color: yellow;
}

Je veux que les éléments de la liste aient à la fois une background-color et une largeur ne dépassant pas leur contenu. Mais si je leur ajoute la propriété display: inline-block , ils apparaîtront tous côte à côte. Comment pourrais-je résoudre ce problème?

css list

0 commentaires

4 Réponses :

2
votes

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>  
  <li>Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk & Coffee & Milk &</li>
</ul>

4 commentaires

Tbh, je ne savais même pas que le max-content existe. Pourquoi n'est-il pas affiché comme valeur dans la propriété width ici w3schools.com/cssref/pr_dim_width.asp

@darkchampionz car ce site ne doit pas être utilisé . Vérifiez ici: developer.mozilla.org/en-US/docs/Web/CSS/width

salut! La solution a semblé fonctionner au début mais, comme il s'est avéré, elle n'enveloppe pas le texte. Existe-t-il également un moyen de résoudre ce problème? Merci

@darkchampionz avez-vous également défini la largeur maximale comme dans l'exemple? J'ai ajouté un li plus long pour montrer qu'il s'enroule;)

1
votes

Le moyen le plus simple est de placer l'élément de liste dans une span .

<ul>
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ul>

li span {
  background-color: yellow;
}

0 commentaires

2
votes

Vous pouvez utiliser span dans les balises li

<ul>
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ul>

span {
  background-color: yellow;
}

0 commentaires

0
votes

L'ancien flotteur peut le faire ici:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

li {
  background-color: yellow;
  float:left;
  clear:left;
}

0 commentaires