web-dev-qa-db-fra.com

Centre des balles avec liste non ordonnée

Est-ce que quelqu'un connaît le CSS qui fait que le point de balle se situe au sommet d'une liste à puces multiligne? Pour une raison quelconque, avec le modèle, j’utilise le point de la puce au centre gauche, au lieu d’être assis juste à côté du premier mot si j’ai plusieurs lignes de texte.

htmlcsshtml-lists
24
Logan

Définissez la position du style de la liste sur l'élément de la liste, voirthis demo fiddle.

CSS:

ul {
    list-style-position: inside;
}
52
NGLN

Ce n'est pas une réponse en soi, mais cela peut donner à d'autres un aperçu d'une situation visuelle similaire dans des circonstances différentes.

J'ai eu le même problème, comme suit:

 Bullet centered in text block

Mon HTML ressemblait à ceci:

<ul>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
</ul>

Et le CSS aime ça:

a {
    display: inline-block;
    vertical-align: middle;
}

Voir la partie incriminée? La déclaration vertical-align: middle;.

Il y a deux solutions:

Solution 1

Supprimez complètement la déclaration vertical-align: middle;.

Solution 2

Modifiez la valeur: vertical-align: middle; en vertical-align: top;.

Résultat (comme prévu au début):

 Bullet top aligned

J'espère que cela t'aides.

0
Ricardo Zea