28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement texte ul li

Bonjour à tous,

Avez-vous un astuce pour que, lorsque j'ai un texte sur 2 ligne avec une liste à puce, la 2nd ligne se retrouve sous le début de la 1ère ligne et non sous la puce ?
Le détail : ma liste à puce est créé avec : content: "..." et non list-style-type )

... - . lorem ipsum 1ère ligne
..... . lorem ipsum 2nd ligne

et non :

... - .. lorem ipsum 1ère ligne
lorem ipsum 2nd ligne
Modifié par n0wmi (27 Apr 2015 - 22:52)
Bon, alors, un truc du genre :

ul li {
	list-style-type: none;
	text-indent: -20px;
}

ul li:before {
	content:"-";
	margin-right: 6px
}


J'ai travaillé en Verdana avec la taille de caractères par défaut, et j'ai travaillé en pixels parce que c'était plus facile. Les valeurs sont donc à adapter, j'imagine.

upload/208-puces.png

Il est aussi possible qu'il faille ajouter un margin-left aux li.

Bonne continuation.

EDIT : Vérification faite (un peu tard) la marge après les puces n'est pas la même dans FF, IE11 et Chrome 42 (pas d'autre navigateur sous la main) . Il est nécessaire de la réduire dans ces derniers.
Modifié par thierry (28 Apr 2015 - 11:52)
perfect !!
merci, je n'y pense jamais à ce text-indent. C'était tout simple
Modifié par n0wmi (27 Apr 2015 - 22:52)
Sujet clos
Aller à