Comment puis-je obtenir des sauts de ligne correctement indentés dans les listes à puces ?

Réalisation de sauts de ligne en retrait dans les listes à puces

Lorsque vous traitez de longs éléments de liste à puces qui se terminent sur une nouvelle ligne, il est souhaitable de poursuivre pour aligner horizontalement avec la première ligne. Par défaut, le texte enveloppé apparaît sous la puce, créant une apparence non alignée.

Pour résoudre ce problème, nous pouvons utiliser une approche utilisant des divs supplémentaires.

Solution

1. Enveloppez la balle dans un Div :
   Enfermez la balle dans un document séparé
   élément, fournissant un positionnement absolu et ajustant sa marge pour correspondre à l'apparence de la puce.
2. Enveloppez les deux div dans un conteneur Div :
   Créez un conteneur
   pour contenir à la fois la puce et le texte de l'élément de liste

   éléments. Appliquez le style nécessaire pour contrôler le remplissage et le débordement.
3. Alignez le texte de l'élément de liste :
   Dans le conteneur, assurez-vous que le texte
   a un remplissage approprié pour l'aligner horizontalement avec la puce.

Exemple de code

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<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>

En suivant cette approche, la ligne enveloppée dans le La liste à puces sera en retrait à droite de la puce, en s'alignant sur la première ligne et en améliorant la lisibilité et l'esthétique de votre liste.

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!