html - How to keep indent for second line in ordered lists via CSS?

ID : 10116

viewed : 40

Tags : htmlcsshtml-listshtml

Top 5 Answer for html - How to keep indent for second line in ordered lists via CSS?

vote vote

94

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:

ul {   list-style-position: outside; } 

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

Original Answer

I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:

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

Demo: http://jsfiddle.net/4rnNK/1/

enter image description here

To make it work in IE8, use the legacy :before notation with one colon.

vote vote

84

I believe this will do what you are looking for.

.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

vote vote

73

The easiest and cleanest way, without any hacks, is to just to indent the ul (or ol), like so:

ol {   padding-left: 40px; // Or whatever padding your font size needs } 

This gives the same result as the accepted answer: https://jsfiddle.net/5wxf2ayu/

Screenshot:

enter image description here

vote vote

62

Check this fiddle:

http://jsfiddle.net/K6bLp/

It shows how to manually indent ul and ol using CSS.

HTML

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

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

Also I edited your fiddle:

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

Make a note of it.

vote vote

56

You can set the margin and padding of either an ol or ul in CSS:

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

Top 3 video Explaining html - How to keep indent for second line in ordered lists via CSS?

Related QUESTION?