web-dev-qa-db-fra.com

Retrait suspendu compatible avec plusieurs navigateurs pour les listes

J'ai une liste non ordonnée où j'essaie de contrôler le retrait suspendu. Sur les éléments qui débordent sur deux lignes, je veux que la deuxième ligne de texte s'aligne directement sous la ligne de texte précédente (pas sous la puce). J'ai cela pour fonctionner dans Chrome exactement comme je le veux. Cependant, c'est un peu hors de Firefox et Internet Explorer.

Voici ce que j'ai actuellement:

<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>

Existe-t-il un moyen de rendre ce rendu identique dans tous les navigateurs?

htmlcsshtml-lists
25
Austin

Retirer text-indent, changement list-style à outside, et appliquez un padding-left à vos éléments li:

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}
37
Natalie Banegas

La seule chose que j'ai dû ajouter à la réponse acceptée était le retrait de texte puisque j'utilisais des puces fontello:

ul {
    list-style: disc outside none;
    margin-left: 0; 
    padding-left: 1em;
    text-indent: -2em;
}

li{
    padding-left: 1em;
}
2
Elliott de Launay

Utilisez un CSS reset first , puis ajustez votre CSS en conséquence.

0
Diodeus - James MacFarlane