proper indenting for ordered lists in html

问题

I cannot get an ordered list to show proper indenting. The numbers are all aligned to the right. So the browser (Chrome) shows a space before the single digit numbers and only aligns the double digit numbers correctly to the left.

How can I output a nice ordered list where the numbers are all aligned to the left and the list items all start below each other?

回答1:

Actually, the solution is pretty simple, just set

ol {list-style-position: inside;}

And your numbers should "align to the left" like you want.

回答2:

Late to the party but I've just been wrestling with this problem myself and ended up using this combo which adds a zero before any single digit list items:

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

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

回答3:

If you don't mind using absolute positioning, this might work for you.

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

Note: If you've got anything appearing to the left of the <ol> element on your page (like a floating div), that content will move the numbers to the right, but not the acutal <li> content.

You could also use a whole different technique, with a different markup (nested div elements) with display:table and display:table-cell properties set. That would eliminate the issue with elements appearing on the left, but would require you to utilize the CSS counter property.

回答4:

You can use CSS to select a range; in this case, you want list items 1-9:

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

Then adjust margins on those first items appropriately:

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

See it in action here: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

回答5:

Jo Sprague was not too far off, but it's actually outside and not inside as stated above.

It becomes immediately apparent if the contents of a li wraps to a new line.

<style type="text/css">
   ol { width: 250px; }
   li { list-style-position: outside; }
</style>

<ol>
   <li>
       This is an list item that is very 
       long so you may know if the content 
       will be aligned to it's sibling
   </li>
   <li>Just a short list item</li>
</ol>

Here is a good codepen https://codepen.io/pen/ for testing.

来源：https://stackoverflow.com/questions/3758900/proper-indenting-for-ordered-lists-in-html

标签

html

css

alignment

html-lists