Comment garder l'indentation de deuxième ligne dans l'ordre des listes via CSS?

Je veux avoir un "à l'intérieur" de de liste de liste avec des puces ou des nombres décimaux être flush avec supérieure des blocs de texte. Deuxième lignes d'entrées de la liste à avoir la même tiret comme la première ligne!

E. g.:

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 prend seulement deux valeurs pour ses "list-style-position" - à l'intérieur et à l'extérieur. Avec "l'intérieur" de la seconde ligne sont au même niveau que la liste des points à la ligne supérieure:

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

Largeur "de l'extérieur" ma liste n'est pas correctement aligné avec le supérieur de blocs de texte plus.

Expériences largeur text-indent, padding-left et margin-left de travail pour les listes non ordonnées, mais ils ne parviennent pas pour les listes ordonnées, car il dépend de la liste des décimales du nombre de caractères:

 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 rincer avec le supérieur d'un bloc de texte par rapport à "3" et "4.".

Où est donc le secret sur les listes ordonnées et le deuxième-ligne-tiret? Merci pour votre effort!

  • Utilisateur Pali Madra ajouté cela comme une réponse, mais il a été supprimé pour ne contenant pas plus de exlpanation. Il a dit que le jsfiddle peut-être ce que vous êtes à la recherche de: jsfiddle.net/palimadra/CZuXY/1
  • Essayez de définir padding-left seulement ...
  • Dans le cas où quelqu'un tombe sur cette question, qui est simplement à la recherche pour "liste de base d'insertion", jetez un oeil à cette question (stackoverflow.com/questions/17556496/...) et Natasha Banegas réponse.
  • Pas une seule réponse, adresses, la question réelle. La vraie question est comment faire pour aligner à gauche les chiffres dans la liste, alors que séparément à gauche aligner le texte de l'élément de la liste avec le texte de l'objet au-dessus d'elle lorsque que le texte déborde à une deuxième ligne. Par défaut -- et dans presque chaque réponse, la liste est chiffres sont alignés à droite et le texte de la liste des éléments sont alignés à gauche.
InformationsquelleAutor kernfrucht | 2012-05-03
  1. 237

    Mise à jour

    Cette réponse est obsolète. Vous pouvez le faire beaucoup plus simplement, comme l'a souligné
    Je suis surpris de voir ce qui n'a pas encore été résolu. Vous pouvez utiliser le navigateur de la table de l'algorithme de mise en page (sans l'aide de tableaux) comme ceci:

    ul {
  list-style-position: outside;
}

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

    Réponse Originale À Cette Question

    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/

    Comment garder l'indentation de deuxième ligne dans l'ordre des listes via CSS?

    Pour le faire fonctionner dans IE8, l'utilisation de l'héritage :before notation avec un deux-points.

    • Ressemble beaucoup - je n'ai pas l' "foo" valeur - ne devrait-il pas une propriété numérique ou?
    • est juste une chaîne de caractères arbitraire (id), il est utilisé pour connecter le counter-reset, counter-increment et counter() propriétés.
    • okay eu 🙂 merci.
    • Qui fonctionne très bien. Que faire si je veux avoir une autre liste incorporés dans cette liste? Toutes les recommandations?
    • Pas de problème, vous pouvez utiliser le même fichier CSS: jsfiddle.net/4rnNK/44 C'est parce que CSS compteurs sont auto-imbrication: w3.org/TR/CSS21/generate.html#scope
    • Cela a pour effet de bord de la numérotation des listes non ordonnées. Auriez-vous l'esprit d'édition pour les accueillir?
    • Sûr, c'est fait.
    • Vous pouvez également éviter les déglingués de la table des trucs en utilisant position: relative sur le <li>et position: absolute sur le contenu généré. Voir jsfiddle.net/maryisdead/kgr4k pour un exemple.
    • Pourquoi 40px? Qui va briser lorsque les compteurs sont plus large que celui. Le point de l'ensemble de l'aide du tableau de mise en page, c'est que le navigateur va automatiquement ajuster le contenu.
    • Ouais, c'est sûr qu'il fait, mais dans la plupart des cas, vous pouvez accueillir pour que. Il suffit de montrer une autre façon et en plus vous pouvez faire beaucoup plus le style d'une montre avec un élément qui n'est pas display: table-cell.
    • C'est malin, mais pas aussi clair et concis que JTOrlando la réponse de ol { text-indent: -1em; padding-left: 1em; }
    • Sympa, mais comment contrôlez-vous les <li> bas de la marge? La hauteur de la <li> est uniquement déterminé par la hauteur de la table-cell éléments. Ainsi, margin, padding, et de la hauteur sur ces éléments n'ont aucun effet. Comment faire pour contourner cette limitation?
    • Si vous avez plusieurs lignes les éléments de la liste, et ont besoin espacement vertical, la solution est d'ajouter de la bordure verticale de l'espacement à l'ol sélecteur, par exemple border-spacing: 0 3px; Normal rembourrage sur la table-cell ne fonctionne pas parce que le nombre est toujours une seule ligne.
    • Cela fonctionne, mais une méthode plus simple serait ol { padding-left: 1em }.
    • Concernant ol { text-indent: -1em; padding-left: 1em; } solution — essayer de vérifier que dans les différents navigateurs (par exemple, Safari vs Chrome) et les polices. Il est juste dit en gros qu' ol { text-indent: -Npx; padding-left: Npx; } et est très fragile.

    InformationsquelleAutor user123444555621
  2. 203

    Je crois que cela va faire ce que vous cherchez.

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

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

    Comment garder l'indentation de deuxième ligne dans l'ordre des listes via CSS?

    • mieux si vous aussi ajouter padding-left: cadratin (1 em;
    • C'est de loin la réponse la meilleure de toutes les solutions dans cette page. Il est beaucoup plus pratique que d'autres. Si vous êtes hésitant à répondre à choisir, celui-ci.
    • l'utilisation de padding-left:1em a fait pour moi. solution la plus simple est souvent le meilleur.
    • Ajouté padding-left: 1em; 🙂
    • Ce doit être la accepté de répondre - c'est bien plus simple et fonctionne, tout simplement!
    • C'est rapide et sale, mais n'est pas une véritable solution. Tout d'abord, 1em n'est pas égal à l'espace de retrait de la. Les lignes ne seront pas aligner parfaitement pixel-sage. Deuxièmement, qu'en est-il de la liste atteint le nombre de 10? 100? Le texte-tiret ne fonctionne pas, il ne sera pas aligné. Cette réponse devrait être en bas-voté.
    • C'est un disque liste non numérotée, alors pourquoi compter jusqu'à 100? Je ne vois pas de problème avec mes listes à l'aide du code ci-dessus.
    • Le tiret n'est pas 1em. oi60.tinypic.com/a0eyvs.jpg Le premier élément de liste est l'aide de l'text-indent technique ci-dessus. Comparé à la façon dont il cherche avec list-style-position: extérieur, c'est mal aligné, par un pixel dans ce cas.
    • Je ne sais pas à quoi vous faites allusion. Voici une capture d'écran d'une liste avec le code ci-dessus, pas de problèmes, n'importe où: imgur.com/Y1Y3oQc vous avez Peut être besoin d'une meilleure réinitialiser pour vous des listes ou il y a d'autres problèmes :/
    • Ne pourrait-on pas combiner les deux premières lignes de list-style: disc inside;?
    • Absolument d'accord, la meilleure réponse. Très simple et fonctionne bien merci!
    • C'est une bonne réponse, mais seulement pour les listes non ordonnées. Cela ne répond pas à l'original de la demande de retrait de la deuxième ligne de listes ORDONNÉES via CSS.
    • L'homme, certaines personnes se sont donc geignards et pointilleux sur ici. Je pense que c'est une excellente solution. En ce qui concerne pour une liste numérotée système, vous pouvez toujours ajouter différents rembourrage pour les nombres à 2 chiffres, le même pour les 3 chiffres. Sinon, cette solution fonctionne vraiment bien.

    InformationsquelleAutor JTOrlando
  3. 34

    La méthode la plus simple et la plus propre, sans hacks, est juste en retrait de la ul (ou ol), comme suit:

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

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

    Capture d'écran:

    Comment garder l'indentation de deuxième ligne dans l'ordre des listes via CSS?

    InformationsquelleAutor Chuck Le Butt
  4. 25

    Vérifier ce violon:

    http://jsfiddle.net/K6bLp/

    Il montre comment manuellement tiret 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;
}

    Aussi j'ai édité votre violon

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

    Faire une note de celui-ci.

    • merci, ça fonctionne très bien pour l'UL et OL jusqu'à 9 entrées de la liste. C'est le principal problème que j'ai décrit dans ma question de la largeur de la 11/12-chose. Dans mon exemple ci-dessus, je exécuter une autre technique si le problème est différent, mais le cœur du problème reste le même: Il y a une différence si mon décimal-liste-point a un ou deux ou plusieurs objets numériques - par exemple, 1., 11. ou 111.! Je ne vois pas où je suis en mesure de réagir via CSS et ajuster le texte-tiret et de la marge gauche pour le nombre d'objets numériques.
    • exemple pour mon commentaire ci-dessus: jsfiddle.net/j7MEd/5
    • Pour la deuxième ligne de retrait de l'ol(plus qu'un chiffre), je pense que le CSS ne sera pas le résoudre. Nous ne devrions aller pour jquery.
    • Notez également que le type attribut pour <ol> semble être obsolète en HTML 5. Utilisation style="list-style-type: " à la place.
    • 21 vous les gens même de sérieux? cela ne fonctionne pas. Vous ne savez pas si vous avez modifié votre code depuis que vous avez posté.
    • Cela ne fonctionne pas. Pourquoi il a tant de upvotes, je ne comprends pas...

    InformationsquelleAutor Deepan Babu
  5. 9

    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;
}
    • malheureusement le problème n'est pas résolu par cette solution: le deuxième lignes sont au même niveau que la liste des points à ne pas la largeur de la ligne supérieure, voir l'exemple ci-dessus
    • Vous pouvez poster votre code html/css afin que je puisse travailler avec qui
    • voir mon code là: jsfiddle.net/j7MEd
    • Les 11 et 12 jsfiddle.net/j7MEd/1 en ligne avec le haut et le bas de paragraphes et je n'ai pas changé le code. Ai-je raté quelque chose?
    • non, ce n'est pas le point. Le principal problème est que la deuxième (et troisième, etc...) de la ligne de chaque liste n'a pas la même "tiret" comme la première ligne! (voir jsfiddle-exemple). Dans ma question ci-dessus, je pense que sur une solution de contournement avec un rembourrage, marge, etc, mais il ne fonctionne que pour les listes non ordonnées. Sur la liste ordonnée de nouveaux problèmes comme ça 11/12 chose se produire. Donc ma question principale est: Comment puis-je obtenir le tiret-chose (comme je le présente dans mon tout premier exemple de mon uestion) fait pour les listes ordonnées sans avoir des problèmes comme le 11/12 chose.
    • Ok désolé ya eu! C'est une façon.. seul problème est de parvenir à la croix-navigateur, vous devez définir la marge dans IE et le rembourrage dans Firefox. jsfiddle.net/j7MEd/2

    InformationsquelleAutor luke2012
  6. 6

    Je crois que vous avez besoin juste de mettre la liste des 'bullet' à l'extérieur de la marge.

    li {
    list-style-position: outside;
    padding-left: 1em;
}
    InformationsquelleAutor KnownColor
  7. 4

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

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

    Puis ajuster les marges sur ces premiers éléments de façon 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; }

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

    InformationsquelleAutor LaFaucon
  8. 3

    ma solution est tout à fait le même que Pumbaa80's, mais je vous suggérons d'utiliser display: table au lieu de display:table-row pour li élément.
    Donc, ce sera 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 les li's

    InformationsquelleAutor Alex
  9. 1

    Je suis assez friand de cette solution par 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;
}
    • seul problème de taille de police
    InformationsquelleAutor Corey Ballou
  10. 1

    Le code CSS suivant fait le tour:

    ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
    InformationsquelleAutor itoctopus
  11. 0

    L'ol, ul listes de travailler si vous le souhaitez, vous pouvez également utiliser une table avec border: none en css.

    • je pense que ce n'est pas une bonne solution concernant les règles sémantiques
    InformationsquelleAutor Casualbot
  12. 0

    CSS prend seulement deux valeurs pour ses "list-style-position" - à l'intérieur et à l'extérieur. Avec "l'intérieur" de la seconde ligne sont au même niveau que la liste des points à la ligne supérieure:

    Dans des listes ordonnées, sans intervention, si vous donnez à "list-style-position de" la valeur "à l'intérieur", la deuxième ligne d'une longue liste d'élément aura pas de tiret, mais d'aller en arrière vers le bord gauche de la liste (c'est à dire qu'il alignera avec le numéro de l'élément). C'est propre à des listes ordonnées et ne se produit pas dans les listes non ordonnées.

    Si vous au lieu de donner des "list-style-position de" la valeur "à l'extérieur", la deuxième ligne sera la même indentation de la première ligne.

    J'avais une liste avec une bordure et eu ce problème. Avec "list-style-position" set "de l'intérieur", ma liste n'a pas l'air comme je le désirais. Mais avec "list-style-position" set "de l'extérieur", les numéros de la liste des articles sont tombés à l'extérieur de la boîte.

    J'ai résolu ce problème en définissant simplement une plus grande marge de gauche pour l'ensemble de la liste, ce qui a poussé l'ensemble de la liste vers la droite, le dos dans la position où il était avant.

    CSS:

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

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

    HTML:

    <ol class="classname" style="margin:0 0 0 1.5em;">
    InformationsquelleAutor Chris
  13. -1

    Ok, je reviens et compris certaines choses. Ceci est une ébauche de SOLUTION à ce que je propose, mais il semble être fonctionnelle.

    Tout d'abord, j'ai fait les numéros d'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 (

    • ), de sorte que vous avez à régler le CSS list-style: none;

      Ensuite, j'ai fait toute la liste display: table-row. Ici, pourquoi n'ai-je pas simplement coller le code au lieu de bavarde à 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 dans la 2e div avec les numéros dans la liste ordonnée de la première div. J'ai entouré la fois dans la liste et le texte avec une étiquette de manière à ce que je peux juste dire à tous les divs pour afficher que les inline-block. Cette alignés bien.

      La marge est là pour mettre un espace entre la période et le début du texte. Sinon, ils courent droit les uns contre les autres et il ressemble à une horreur.

      Mon employeur a voulu enveloppé autour d'un texte (pour plus de bibliograhical entrées) à la ligne avec le début de la première ligne, pas la marge de gauche. À l'origine, j'étais remuer avec une marge positive et une négative retrait du texte, mais ensuite j'ai réalisé que lorsque je suis passé à deux divs, cela a eu pour effet de faire en sorte que le texte sur la même ligne, car la marge de gauche de la div a de la marge où le texte a naturellement commencé. Donc, j'avais besoin d'un 0.2 em marge pour ajouter de l'espace, et tout le reste aligné à merveille.

      J'espère que cette aide si l'OP a été d'avoir un problème similaire...j'ai eu du mal à le comprendre, à lui/elle.

    InformationsquelleAutor David
  14. -1

    J'ai eu ce même problème et a commencé à utiliser user123444555621 réponse. Cependant, j'ai aussi besoin d'ajouter padding et un border à chaque li, qui cette solution ne permet pas, car chaque li est un table-row.

    Tout d'abord, nous utilisons une counter à reproduire le ol's des nombres.

    Ensuite, nous l'avons display: table; sur chaque li et display: table-cell sur le :before pour nous donner l'indentation.

    Enfin, la partie la plus délicate. Puisque nous ne sommes pas à l'aide d'un tableau de mise en page pour l'ensemble de la ol nous devons nous assurer que chaque :before est de la même largeur. Nous pouvons utiliser la ch unité à garder à peu près la largeur égale au nombre de caractères. Afin de garder la largeur uniforme lorsque le nombre de chiffres pour le :before's diffèrent, nous pouvons mettre en œuvre la quantité de requêtes. En supposant que vous savez vos listes ne sera pas 100 points ou plus, vous avez seulement besoin d'une quantité de la règle de requête à dire :before pour modifier la largeur, mais vous pouvez facilement ajouter de plus.

    CSS:

    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;
}

    HTML:

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

    InformationsquelleAutor Jacob Alvarez