How to keep indent for second line in ordered lists via CSS?
I want to have an "inside" list with list bullets or decimal numbers being all flush with superior text blocks. Second lines of list entries have to have the same indent like the first row!
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 provides only two values for its "list-style-position" - inside and outside. With "inside" second lines are flush with the list points not with the superior line:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Width "outside" my list is not flush with superior text blocks anymore.
Experiments width text-indent, padding-left and margin-left work for unordered lists but they fail for ordered lists because it depends on the list-decimal's number of characters:
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." and "12." aren't flush with the superior text block compared to "3." and "4.".
So where's the secret about ordered lists and the second-line-indent? Thank's for your effort!
Solution 1:
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/
To make it work in IE8, use the legacy :before notation with one colon.
Solution 2:
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/
Solution 3:
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:
Solution 4:
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.