Comment aligner les éléments d'une liste à puces enveloppés avec leur première ligne ?

Alignement de la deuxième ligne d'un élément à puce avec la première ligne

Lorsqu'un élément de liste à puces s'étend sur plusieurs lignes, il est souvent souhaitable d'avoir les lignes renvoyées à la ligne. aligner avec la première ligne, plutôt que d'apparaître sous le bullet.

Solution :

Pour obtenir cet alignement, divisez la puce en un div séparé et enveloppez à la fois la puce et le texte dans un div conteneur :

.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;
}

<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 cet exemple :

• Le conteneur-div fournit un remplissage supplémentaire pour créer une marge pour la puce.
• La puce est positionnée de manière absolue dans le conteneur-div en utilisant la position : absolue.
• Le texte est placé dans le div row2 dans le conteneur-div.

Cette approche garantit que les lignes renvoyées à la ligne de l'élément à puce sont alignées avec la première ligne, comme vous le souhaitez.

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!