Comment conserver l'indentation de la deuxième ligne dans les listes ordonnées via CSS ?

Question

Comment conserver l'indentation de la deuxième ligne dans les listes ordonnées via CSS ?

Demandé el 3 de Mai, 2012: Quand la question a-t-elle été
62845 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux avoir une liste "intérieure" avec des puces de liste ou des nombres décimaux qui sont tous alignés avec les blocs de texte supérieurs. Les deuxièmes lignes des entrées de la liste doivent avoir la même indentation que la première ligne !

Par exemple :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS ne fournit que deux valeurs pour son "list-style-position" - inside et outside. Avec "inside", les secondes lignes sont alignées avec les points de la liste et non avec la ligne supérieure :

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

La largeur "extérieure" de ma liste n'est plus au niveau des blocs de texte supérieurs.

Les expériences width text-indent, padding-left et margin-left fonctionnent pour les listes non ordonnées mais échouent pour les listes ordonnées car cela dépend du nombre de caractères de la liste-décimale :

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

Les "11." et "12." ne sont pas au même niveau que le bloc de texte supérieur, contrairement aux "3." et "4.".

Où est le secret des listes ordonnées et de l'alinéa de deuxième ligne ? Merci pour vos efforts !

Demandé el 3 de Mai, 2012 par kernfrucht

1 votes

Utilisateur Pali Madra J'ai ajouté ceci comme réponse, mais elle a été supprimée car elle ne contenait pas d'explications supplémentaires. Il a dit que le jsfiddle pourrait être ce que vous recherchez : jsfiddle.net/palimadra/CZuXY/1

Commenté el 24 de Août, 2012 par bfavaretto

0 votes

Essayez de définir le padding-left seulement ...

Commenté el 21 de Octobre, 2013 par matzone

3 votes

Au cas où quelqu'un tomberait sur cette question et ne chercherait qu'une "indention de liste de base", jetez un coup d'œil à cette question ( stackoverflow.com/questions/17556496/ ) et Natasha Banegas répondent.

Commenté el 19 de Février, 2014 par SunnyRed

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

335voto

Pumbaa80 Points 27066

Mise à jour

Cette réponse est dépassée. Vous pouvez le faire beaucoup plus simplement, comme indiqué dans une autre réponse ci-dessous :

ul {
  list-style-position: outside;
}

Voir https://www.w3schools.com/cssref/pr_list-style-position.asp

Réponse originale

Je suis surpris de voir que ce problème n'a pas encore été résolu. Vous pouvez utiliser l'algorithme de mise en page des tableaux du navigateur (sans utiliser de tableaux) comme ceci :

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Démonstration : http://jsfiddle.net/4rnNK/1/

enter image description here

Pour le faire fonctionner dans IE8, utilisez l'ancienne version de l'application :before avec un deux-points.

Répondu el 7 de Juillet, 2013 par Pumbaa80 (27066 Points )

0 votes

C'est très bien, mais je ne comprends pas la valeur de "foo". Ne devrait-elle pas avoir une propriété numérique ou ?

Commenté el 8 de Août, 2013 par Sha

2 votes

@Perelli foo est juste une chaîne arbitraire (id), il est utilisé pour connecter le counter-reset , counter-increment et counter() propriétés.

Commenté el 8 de Août, 2013 par Pumbaa80

0 votes

Cela fonctionne très bien. Que faire si je veux avoir une autre liste intégrée à cette liste ? Avez-vous des recommandations ?

Commenté el 10 de Octobre, 2013 par pdwalker

Afficher 12 autres commentaires

Answer 3

241voto

JTOrlando Points 291

Je pense que cela fera ce que vous recherchez.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle : https://jsfiddle.net/dzbos70f/

Répondu el 7 de Juillet, 2013 par JTOrlando (291 Points )

21 votes

C'est mieux si vous ajoutez également padding-left : 1em ;

Commenté el 12 de Août, 2013 par Bence Gacsályi

20 votes

C'est de loin la meilleure réponse de toutes les solutions proposées sur cette page. Elle est beaucoup plus pratique que les autres. Si vous hésitez sur la réponse à choisir, choisissez celle-ci.

Commenté el 25 de Juin, 2014 par Valentin Mercier

0 votes

L'utilisation de padding-left:1em La solution la plus simple est généralement la meilleure.

Commenté el 5 de Août, 2014 par Ryan Tuck

Afficher 12 autres commentaires

Answer 4

27voto

Deepan Babu Points 385

Vérifiez ce violon :

http://jsfiddle.net/K6bLp/

Il montre comment mettre manuellement en retrait ul et ol à l'aide de CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

J'ai aussi édité ton violon

http://jsfiddle.net/j7MEd/3/

Prenez-en note.

Répondu el 3 de Mai, 2012 par Deepan Babu (385 Points )

1 votes

Merci, cela fonctionne parfaitement pour UL et pour OL jusqu'à 9 entrées de liste. C'est le problème principal que j'ai décrit dans ma question sur la largeur du 11/12. Dans mon exemple ci-dessus, j'utilise une autre technique, donc le problème semble différent, mais le cœur du problème reste le même : il y a une différence si mon point de liste décimal a un ou deux ou plusieurs chiffres - par exemple 1., 11. ou 111. ! Je ne vois pas comment je pourrais réagir via les CSS et ajuster l'indentation du texte et la marge gauche en fonction du nombre de chiffres.

Commenté el 3 de Mai, 2012 par kernfrucht

0 votes

Pour le retrait de la deuxième ligne de l'ol(plus d'un chiffre), je pense que CSS ne le résoudra pas. Nous devrions seulement opter pour jquery.

Commenté el 4 de Mai, 2012 par Deepan Babu

0 votes

Notez également que le type attribut pour <ol> semble être déprécié dans HTML 5. Utilisez style="list-style-type: " à la place.

Commenté el 6 de Décembre, 2012 par AJ.

Afficher 1 autres commentaires

Answer 5

15voto

luke2012 Points 1113

Vous pouvez définir la marge et le rembourrage d'un des éléments suivants ol ou ul en CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

Répondu el 3 de Mai, 2012 par luke2012 (1113 Points )

0 votes

Malheureusement le problème n'est pas résolu par cette solution : les deuxièmes lignes affleurent les points de la liste et non la largeur de la ligne supérieure, voir l'exemple ci-dessus.

Commenté el 3 de Mai, 2012 par kernfrucht

0 votes

11 et 12 en jsfiddle.net/j7MEd/1 s'alignent avec les paragraphes du haut et du bas et je n'ai pas modifié le code. Est-ce que quelque chose m'échappe ?

Commenté el 3 de Mai, 2012 par luke2012

0 votes

Non, ce n'est pas le problème. Le problème principal est que la deuxième (et troisième, etc...) ligne de chaque point de liste n'a pas le même "indent" que la première ligne ! (voir l'exemple de jsfiddle). Dans ma question ci-dessus, je pense à une solution de contournement avec padding, marge, etc, mais cela ne fonctionne que pour les listes non ordonnées. Pour les listes ordonnées, de nouveaux problèmes comme celui des 11/12 apparaissent. Ma question principale est donc la suivante : comment puis-je obtenir l'indentation (comme je l'ai présentée dans le premier exemple de ma question) pour les listes ordonnées sans avoir de problèmes comme celui des 11/12.

Commenté el 3 de Mai, 2012 par kernfrucht

Afficher 1 autres commentaires

Answer 6

8voto

LaFaucon Points 41

Vous pouvez utiliser le CSS pour sélectionner une plage ; dans ce cas, vous voulez les éléments de la liste 1-9 :

ol li:nth-child(n+1):nth-child(-n+9)

Ensuite, ajustez les marges sur ces premiers articles de manière appropriée :

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Voyez-le en action ici : http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Répondu el 30 de Novembre, 2012 par LaFaucon (41 Points )

Comment conserver l'indentation de la deuxième ligne dans les listes ordonnées via CSS ?

Réponses

Mise à jour

Réponse originale

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment conserver l'indentation de la deuxième ligne dans les listes ordonnées via CSS ?

Réponses

Mise à jour

Réponse originale

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: