htmlcssalignmenthtml-lists

Left align both list numbers and text


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

enter image description here

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.


Solution

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