Avez-vous déjà voulu indenter la deuxième ligne d’un élément de liste au lieu qu’il apparaisse directement sous le point à puces? C’est probablement pourquoi vous êtes ici et ci-dessous est probablement le résultat que vous recherchez:
Aujourd’hui, nous allons vous montrer un moyen facile de le faire.
La raison pour laquelle cela se produit est que la coche est du contenu en ligne, donc lorsque le texte s’enroule, il continuera à circuler comme d’habitude.
Vous pouvez arrêter ce comportement en profitant de text-indent:
La propriété text-indent spécifie l’espace horizontal à laisser avant le début de la première ligne du contenu textuel d’un élément.
En fournissant un tiret de texte négatif, vous pouvez indiquer à la première ligne de déplacer la quantité souhaitée vers la gauche. Si vous spécifiez ensuite un remplissage positif à gauche, vous pouvez annuler ce décalage.
Dans l’exemple suivant une valeur de 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }Et voilà, voici un CodePen de ce qui précède en action.