Comment mettre correctement en retrait le texte enveloppé dans les listes à puces ?

Comment mettre en retrait la deuxième ligne d'un élément de liste à puces enveloppé

Lorsque vous travaillez avec des listes à puces, un élément de liste peut parfois être si long qu'il passe à la ligne suivante. Par défaut, la partie enveloppée s'alignera sur le début de la ligne, créant une apparence désordonnée. Pour résoudre ce problème, nous voulons que la partie enveloppée s'aligne avec la première ligne de l'élément de puce.

Dans cette question, l'utilisateur est confronté au même problème. Leur code actuel, fourni dans la section « Contenu du problème », n'obtient pas l'indentation souhaitée. La solution proposée consiste à diviser l'élément de puce en deux divs distincts : un pour la puce et un pour le texte. Ces div sont ensuite enveloppés dans un div conteneur.

Voici un extrait de code amélioré utilisant l'approche suggérée :

CSS

.container-div {
  padding-left: 20px;
  overflow: hidden;
  max-width: 500px;
}

.red-square-5 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 0.5em;
  background: #f00;
}

HTML

<div class="container-div">
  <div class="red-square-5"></div>
  <div class="row2">
    Long long long long long long long long long long long long long long long long long long long long long long long long long title
  </div>
</div>

Dans ce code mis à jour, le carré rouge représentant le la puce est positionnée de manière absolue et alignée verticalement avec la première ligne de texte. Le texte long s'écoule ensuite naturellement, en s'alignant sur le bord gauche du div du conteneur. Cette approche permet d'obtenir l'indentation souhaitée pour la partie enveloppée de l'élément de balle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!