web-dev-qa-db-fra.com

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

Je veux une liste "interne" avec des puces ou des nombres décimaux alignés avec des blocs de texte supérieurs. Les deuxièmes lignes des entrées de la 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 "dedans", les deuxièmes 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 "en dehors" de ma liste n'est plus alignée avec les 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 elles dépendent 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 alignés avec le bloc de texte supérieur par rapport à "3." et "4.".

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

htmlcsshtml-lists
238
kernfrucht

Mise à jour

Cette réponse est obsolète. Vous pouvez le faire beaucoup plus simplement. Comme je l'ai dit, je suis surpris de voir que cela n'a pas encore été résolu. Vous pouvez utiliser l'algorithme de présentation de la table du navigateur (sans utiliser de table) comme ceci:

ul {
  list-style-position: outside;
}

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

Réponse originale

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/

enter image description here

Pour que cela fonctionne dans IE8, utilisez la notation héritée :before avec un colon.

244
user123444555621

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/

enter image description here

204
JTOrlando

Le moyen le plus simple et le plus propre, sans aucun piratage, consiste simplement à indenter la ul (ou ol), comme suit:

ol {
  padding-left: 40px;
  list-style-position: outside;
}

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

Capture d'écran:

enter image description here

35
Chuck Le Butt

Vérifiez ce violon:

http://jsfiddle.net/K6bLp/

Il montre comment indenter manuellement 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.

25
Deepan Babu

Vous pouvez définir la marge et le remplissage d'un ol ou ul en CSS

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

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

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

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

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

Puis ajustez 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/

5
LaFaucon

ma solution est tout à fait la même que celle de Pumbaa8 , mais je suggère d'utiliser display: table au lieu de display:table-row pour l'élément li. Donc ce sera quelque chose comme ça:

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 li '

3
Alex

J'aime beaucoup 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;
}
1
Corey Ballou

Le CSS suivant a fait l'affaire:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
1
itoctopus

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

0
Casualbot

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 secondes lignes affleurent aux points de la liste et non à la ligne supérieure:

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

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

J'ai eu une liste avec une frontière et 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 du cadre.

J'ai résolu ce problème 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 où 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;">
0
Chris