Comment conserver le retrait pour la deuxième ligne dans les listes ordonnées via CSS?

260

Je veux avoir une liste "intérieure" avec des puces de liste ou des nombres décimaux affleurant tous avec des blocs de texte supérieurs. Les deuxièmes lignes des entrées de liste doivent avoir le même retrait 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 sa "position de style de liste" - à l'intérieur et à l'extérieur. Avec "l'intérieur", les deuxièmes lignes sont alignées avec les points de 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 "à l'extérieur" de ma liste n'est plus affleurante avec des blocs de texte supérieurs.

Les tests de largeur avec retrait de texte, remplissage à gauche et marge à gauche fonctionnent pour les listes non ordonnées, mais ils é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

"11." et "12." ne sont pas à égalité avec le bloc de texte supérieur par rapport à "3." et "4.".

Alors, où est le secret des listes ordonnées et du tiret de deuxième ligne? Merci pour votre effort!

html  css  html-lists 
— kernfrucht
source
1
L'utilisateur Pali Madra a ajouté cela comme réponse, mais il a été supprimé car il ne contenait aucune autre explication. Il a dit que le jsfiddle peut être ce que vous cherchez: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Essayez de définir le remplissage à gauche uniquement ...
— matzone
3
Au cas où quelqu'un tomberait sur cette question, qui cherche juste "l'indentation de liste de base", jetez un coup d'œil à cette question ( stackoverflow.com/questions/17556496/… ) et Natasha Banegas répondra.
— SunnyRed
Pas une seule réponse ne répond à la question réelle. La vraie question est de savoir comment aligner à gauche les chiffres de la liste, tout en alignant séparément le texte de l'élément de liste avec le texte de l'élément au-dessus lorsque ce texte déborde sur une deuxième ligne ou une ligne suivante. Par défaut - et dans presque toutes les réponses - les chiffres de la liste sont alignés à droite et le texte des éléments de la liste est aligné à gauche.
— Jessie Westlake

Réponses:

267

Mettre à 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 cela n'a pas encore été résolu. Vous pouvez utiliser l'algorithme de disposition 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émo: http://jsfiddle.net/4rnNK/1/

entrez la description de l'image ici

Pour le faire fonctionner dans IE8, utilisez la :beforenotation héritée avec un deux-points.

— user123444555621
source
2
@Perelli fooest juste une chaîne arbitraire (id), elle est utilisée pour connecter les propriétés counter-reset, counter-incrementet counter().
— user123444555621
3
Vous pouvez également éviter les trucs de table bancale en utilisant position: relativesur <li>et position: absolutesur le contenu généré. Voir jsfiddle.net/maryisdead/kgr4k pour un exemple.
— maryisdead
2
@maryisdead Pourquoi 40px? Cela se cassera lorsque les compteurs seront plus larges que cela . L'intérêt de la disposition des tableaux est que le navigateur adaptera automatiquement le contenu.
— user123444555621
5
Bien, mais comment contrôlez-vous la <li> marge inférieure? La hauteur du <li> est uniquement déterminée par la hauteur des éléments de cellule de tableau qu'il contient. Ainsi, la marge, le rembourrage et la hauteur de ces éléments n'ont aucun effet. Comment contourner cette limitation?
— hschmieder
3
Si vous avez des éléments de liste sur plusieurs lignes et que vous avez besoin d'un espacement vertical cohérent, la solution consiste à ajouter un espacement vertical des bordures au sélecteur ol, par exemple, border-spacing: 0 3px; Le remplissage normal sur la cellule du tableau ne fonctionne pas car le nombre est toujours composé d'une seule ligne.
— RemBem
207

Je crois 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/

entrez la description de l'image ici

— JTOrlando
source
21
mieux si vous ajoutez également padding-left: 1em;
— Bence Gacsályi
16
C'est de loin la meilleure réponse de toutes les solutions de cette page. C'est beaucoup plus pratique que d'autres. Si vous hésitez avec quelle réponse choisir, choisissez celle-ci.
— Valentin Mercier
25
@loremmonkey C'est rapide et sale mais ce n'est pas une vraie solution. Tout d'abord, 1emn'égale pas l'espace du retrait. Les lignes ne s'aligneront pas parfaitement au niveau des pixels. Deuxièmement, qu'en est-il lorsque la liste atteint le numéro 10? 100? Le retrait de texte ne fonctionnera pas, il ne sera pas aligné. Cette réponse devrait être rejetée.
— Sunny
1
@Sunny C'est une liste de disques pas numérotée, alors pourquoi compter jusqu'à 100? Je ne vois aucun problème avec mes listes en utilisant le code ci-dessus.
— lorem monkey
2
@loremmonkey Le retrait n'est pas 1em. oi60.tinypic.com/a0eyvs.jpg Le premier élément de liste utilise la technique de retrait de texte ci-dessus. Comparé à ce à quoi il ressemble normalement avec la position de style liste: à l'extérieur, il est mal aligné, décalé d'un pixel dans ce cas.
— Sunny
39

Le moyen le plus simple et le plus propre, sans aucun piratage, consiste simplement à mettre en retrait le ul(ou ol), comme ceci:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Cela donne le même résultat que la réponse acceptée: https://jsfiddle.net/5wxf2ayu/

Capture d'écran:

entrez la description de l'image ici

— Chuck Le Butt
source
1
Vous devrez peut - être demander list-style-position: outsideà <li>.
— Alex
@Alex Vous ne devez effectuer cette opération que si vous forcez l'écrasement d'un style existant ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).
— Chuck Le Butt
25

Vérifiez ce violon:

http://jsfiddle.net/K6bLp/

Il montre comment indenter manuellement ul et ol en utilisant 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.

— Deepan Babu
source
merci, cela fonctionne très bien pour UL et pour OL jusqu'à 9 entrées de liste. C'est le principal problème que j'ai décrit dans ma largeur de question, le 11/12. Dans mon exemple ci-dessus, j'exécute une autre technique pour que le problème soit 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écimale a un ou deux ou plusieurs chiffres - par exemple 1., 11. ou 111.! Je ne vois aucun point où je suis capable de réagir via CSS et d'ajuster le retrait de texte et la marge gauche au nombre de chiffres.
— kernfrucht
Pour le deuxième retrait de ligne de ol (plus d'un chiffre), je pense que CSS ne le résoudra pas. Nous ne devrions opter que pour jquery.
— Deepan Babu
Notez également que l' typeattribut pour <ol>semble obsolète en HTML 5. Utilisez-le à la style="list-style-type: "place.
— AJ.
2
21 d'entre vous sont-ils même sérieux? cela ne fonctionne pas. Je ne sais pas si vous avez changé votre code depuis votre publication.
— JGallardo
9

Vous pouvez définir la marge et le remplissage d'un olou ulen CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
source
malheureusement, le problème n'est pas résolu par cette solution: les deuxièmes lignes affleurent les points de la liste et non pas la largeur de la rangée supérieure, voir l'exemple ci
— kernfrucht
11 et 12 dans jsfiddle.net/j7MEd/1 s'alignent avec les paragraphes haut et bas et je n'ai pas changé le code. Suis-je en train de manquer quelque chose?
— luke2012
non, ce n'est pas la question. 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 "retrait" que la première ligne! (voir l'exemple jsfiddle). Dans ma question ci-dessus, je pense à une solution de contournement avec le remplissage, la marge, etc., mais cela ne fonctionne que pour les listes non ordonnées. Sur la liste ordonnée, de nouveaux problèmes comme celui-ci se produisent. Donc, ma principale question est: comment puis-je obtenir la mise en retrait (comme je le présente dans mon tout premier exemple de mon uestion) pour les listes ordonnées sans avoir de problèmes comme la chose 11/12.
— kernfrucht
Ok, désolé C'est une façon .. le seul problème est de réaliser un navigateur croisé, vous devrez définir la marge dans IE et le remplissage dans Firefox. jsfiddle.net/j7MEd/2
— luke2012
7

Je crois que vous avez juste besoin de mettre la liste "bullet" en dehors du rembourrage.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— KnownColor
source
6

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

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

Ajustez ensuite les marges sur ces premiers éléments 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/

— LaFaucon
source
5

Le CSS suivant a fait l'affaire:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— Itoctopus
source
4

ma solution est tout à fait la même que celle de Pumbaa80 , mais je suggère d'utiliser à la display: tableplace de display:table-rowfor lielement. Ce sera donc quelque chose comme ceci:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

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

Alors maintenant, nous pouvons utiliser des marges pour l'espacement entre liles

— Alex
source
1

J'aime bien cette solution moi-même:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
— Corey Ballou
source
seul problème de taille de police
— atilkan
0

Les listes ol, ul fonctionneront si vous le souhaitez, vous pouvez également utiliser une table avec bordure: aucune dans le css.

— Casualbot
source
je pense que ce n'est pas une bonne solution concernant les règles sémantiques
— kernfrucht
0

CSS ne fournit que deux valeurs pour sa "position de style de liste" - à l'intérieur et à l'extérieur. Avec "l'intérieur", les deuxièmes lignes sont alignées avec les points de liste et non avec la ligne supérieure:

Dans les listes ordonnées, sans intervention, si vous donnez à "position-style-liste" la valeur "à l'intérieur", la deuxième ligne d'un long élément de liste n'aura pas de retrait, mais retournera au bord gauche de la liste (c'est-à-dire qu'elle sera aligné à gauche avec le numéro de l'article). Ceci est particulier aux listes ordonnées et ne se produit pas dans les listes non ordonnées.

Si vous donnez à la place à "list-style-position" la valeur "outside", la deuxième ligne aura le même retrait que la première ligne.

J'avais une liste avec une bordure et j'ai eu ce problème. Avec "list-style-position" réglé sur "inside", ma liste ne ressemblait pas à ce que je voulais. Mais avec "list-style-position" réglé sur "outside", les numéros des éléments de la liste sont sortis de la boîte.

J'ai résolu cela en définissant simplement une marge gauche plus large pour toute la liste, ce qui a repoussé toute la liste vers la droite, dans la position dans laquelle elle se trouvait auparavant.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— Chris
source
-1

Ok, je suis retourné et j'ai trouvé certaines choses. C'est une SOLUTION RUGUEUSE à ce que je proposais, mais elle semble être fonctionnelle.

Tout d'abord, j'ai fait des chiffres une série de listes non ordonnées. Une liste non ordonnée aura normalement un disque au début de chaque élément de la liste (

  • ), vous devez donc définir le style CSS sur liste: aucun;

    Ensuite, j'ai fait afficher la liste entière: tableau-ligne. Ici, pourquoi ne pas simplement vous coller le code au lieu de bavarder à ce sujet?

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS:

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    Cela semble aligner le texte de la 2e div avec les numéros de la liste ordonnée de la première div. J'ai entouré à la fois la liste et le texte d'une balise afin que je puisse simplement dire à toutes les divs de s'afficher sous forme de blocs en ligne. Cela les alignait bien.

    La marge est là pour mettre un espace entre la période et le début du texte. Sinon, ils se heurtent et cela ressemble à une horreur.

    Mon employeur voulait que le texte enveloppé (pour les entrées bibliographiques plus longues) s'aligne sur le début de la première ligne, pas sur la marge de gauche. À l'origine, je manipulais une marge positive et un retrait de texte négatif, mais j'ai réalisé que lorsque je suis passé à deux divisions différentes, cela a eu pour effet de faire en sorte que le texte soit aligné parce que la marge de gauche de la division était la marge où le texte commençait naturellement. Ainsi, tout ce dont j'avais besoin était d'une marge de 0,2em pour ajouter de l'espace, et tout le reste était aligné à la nage.

    J'espère que cela aide si OP avait un problème similaire ... J'ai eu du mal à le comprendre.

    • — David
    source
    -1

    J'ai eu ce même problème et j'ai commencé à utiliser la réponse de user123444555621 . Cependant, je devais également ajouter paddinget un borderà chacun li, ce que cette solution ne permet pas car chacun liest un table-row.

    Tout d'abord, nous utilisons a counterpour reproduire les olnombres de.

    Nous avons ensuite mis display: table;sur chacun liet display: table-cellsur le :beforepour nous donner l'indentation.

    Enfin, la partie délicate. Étant donné que nous n'utilisons pas une disposition de tableau pour l'ensemble, olnous devons nous assurer que chacun a :beforela même largeur. Nous pouvons utiliser l' chunité pour garder à peu près la largeur égale au nombre de caractères. Afin de garder les largeurs uniformes lorsque le nombre de chiffres :beforediffère, nous pouvons implémenter des requêtes de quantité . En supposant que vous savez que vos listes ne contiendront pas 100 articles ou plus, vous n'avez besoin que d'une règle de requête de quantité pour indiquer :beforede changer sa largeur, mais vous pouvez facilement en ajouter d'autres.

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    Développer l'extrait

    — Jacob Alvarez
    source
    En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
    Licensed under cc by-sa 3.0 with attribution required.