Comment empêcher l'indentation des éléments de liste à puces enveloppés ?

Indentation des éléments de liste à puces enveloppés

Lorsqu'un élément de liste longue passe à une nouvelle ligne, il est courant que la partie enveloppée apparaisse en retrait sous le symbole de la puce. Cependant, dans certains scénarios, il peut être souhaitable que le texte renvoyé à la ligne s'aligne verticalement avec la première ligne.

Pour y parvenir, envisagez d'utiliser une structure de conteneur à deux niveaux. Enveloppez le symbole de puce dans son propre conteneur et placez-le à côté d'un conteneur pour le texte de l'élément de liste. En imbriquant ces conteneurs dans un conteneur parent, vous pouvez contrôler le positionnement et l'alignement des éléments.

.container-div {
    padding-left: 20px;
}

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

.row2 {
    overflow: hidden;
    max-width: 500px;
}

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

Avec cette approche, le texte enveloppé apparaîtra à gauche, aligné avec la première ligne. , tandis que le symbole de la puce reste dans sa position d'origine. Cette technique permet un contrôle précis de l'indentation et de la disposition de vos listes à puces.

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!