Left align both list numbers and text

Question

I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:

For now, each <li> contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.

Here is my code as of now.

HTML:

<ol class="dinosaurs">
    <li><a>Dinosaur</a></li>
    <li><a>Tyrannosaurus</a></li>
    <li><a>Camptosaurus</a></li>
</ol>

CSS:

.dinosaurs{
    list-style-position: inside;
}

NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.

Donadonadee

Isn't this already what you're doing? jsfiddle.net/j08691/LRV5x/1 – Imelda

@Imelda No. Look at the difference between where the text begins in #9 and #10. – Donadonadee

So removing the list style position rule isn't what you need either? jsfiddle.net/j08691/LRV5x/2 – Imelda

@Imelda No. That right aligns the numbers. I want both the numbers and the text to be left aligned. See the picture included in the question. – Donadonadee

Answer 1

You could position the list elements like so:

    .dinosaurs {
  list-style-position: inside;
}

.dinosaurs li{
  position: relative;
}
.dinosaurs li a {
  position: absolute;
  left: 30px;
}

which would yield http://jsfiddle.net/wBjud/2/

Unicef

This should not be the best accepted answer. However, this answer should. – Edea

Answer 2

This seems to work:

.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}

Matrilineage

Really nice to see a flexible solution here. This one won't break like the solutions using absolute positioning if the elements wrap. – Herta

@Herta I can get this one to work a little better (what ford showed doesn't work so well for lists with wrapping text) by setting the LI to position:relative; and the :before to position:absolute; and positioning it that way. jsFiddle example – Arsenate

@BartS. I just logged in to say thank you. I think this should be the answer. Great! – Charactery

Answer 3

None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:

ol {
    counter-reset: item;
}
li {
    display: block;
    margin-left: 1.7em;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    margin-left: -1.7em;
}

Which looks like this: https://jsfiddle.net/b3dayLzo/

I think it works by putting the li:before in the left margin of the li.

You may want a different margin-left.

There's no class on the ol because in my case this appears within the style of the container.

Phellem

This is the most correct answer here. Works better than both the accepted answer and highest voted answer. Well done! – Biddle

I'd vote for this to be the accepted answer, since it's more robust and works for multi line content too. – Chevet

Answer 4

Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.

Afterguard

Ah, The screenshot wasn't up yet. Keep in mind that list-style-position isn't aligning the numbers so much as it's telling the list where to appear in relation to its bounding box. developer.mozilla.org/en-US/docs/CSS/list-style-position – Afterguard

Answer 5

You can fake it by using positioning, padding and margins.

jsFiddle example

.dinosaurs {
  list-style-position: inside;
  position:relative;
  margin-left: -20px;
}
a {
  position:absolute;
  left:70px;
}

Imelda

Answer 6

If you use list-style-position: inside; the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.

ol {
  list-style: none;
  counter-reset: step-counter;
  padding-inline-start: 25px;
}
ol > li {
  counter-increment: step-counter;
}
ol > li:before {
  content: counter(step-counter)".";
  display: inline-block;
  position: absolute;
  margin-left: -25px;
}

To keep your bullets also to the left

ul {
  list-style: none;
  padding-inline-start: 25px;
}
ul > li:before {
  content: '\25cf';
  position: absolute;
  margin-left: -25px;
}

Retinue