Maison >interface Web >tutoriel CSS >Comment aligner les éléments d'une liste à puces enveloppés avec leur première ligne ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-04 00:56:10652parcourir

How to Align Wrapped Bullet List Items with Their First Line?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn