How to keep indent for second line in ordered lists via CSS?
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.
Li item on two lines. Second line has no margin
This is because the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent
:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
By supplying a negative text-indent
you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left
you can cancel this offset out.
In the following example a value of 1.28571429em
is used because it is the width
set on the .fa-fw
by font-awesome.
ul { width: 300px;}li { padding-left: 1.28571429em; text-indent: -1.28571429em;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><ul class="fa-ul custom-list"> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li></ul>
Get second line of bullet item to indent as first part - not underneath the bullet?
My take on this would be to include the bullet in another div and then wrap both divs in a container div.
.row2 { padding-left: 20px; overflow: hidden; max-width: 500px; }.red-square-5 { position:absolute; width:5px; height:5px; margin-top: 0.5em; background:#f00; }
<div class="container-div"> <div class="red-square-5"></div> <div class="row2"> Long long long long long long long long long long long long long long long long long long long long long long long long long title </div></div>
Second line in li starts under the bullet after CSS-reset
The li
tag has a property called list-style-position
. This makes your bullets inside or outside the list. On default, it’s set to inside
. That makes your text wrap around it. If you set it to outside
, the text of your li
tags will be aligned.
The downside of that is that your bullets won't be aligned with the text outside the ul
. If you want to align it with the other text you can use a margin.
ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}
Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement
- Changed the code block to provide just the solution
- Changed the indentation unit to
em
’s - Each property is applied to the
ul
element - Good comments :)
Indent on second line of li text
You can apply a padding-left
to the ul > li
to indent it as a whole, make it's position: relative
and use position: absolute
and left
on the :before
pseudo-element to adjust the horizontal position of the "•" in relation to the left end of the li
:
ul>li { padding-left: 15px; position: relative;}
ul>li:before { content: "•"; position: absolute; left: 5px;}
ol { margin-left: 24px;}
ol,ul { list-style-type: lower-roman}
<ul> <li>Some list text which goes onto the second line. Some list text which goes onto the second line. Some list text which goes onto the second line <ol> <li>sub list text1</li> <li>sub list text1</li> <ol> </li></ul>
Indenting entire list items after using ::before to create bullets
You can play around with negative margin to get the effect you want to, please see the example below.
ul { list-style-type: none; }li::before { content: "•"; margin-right: 5px; color: #821019; font-weight: 700;}
ul.with-margin { margin-left: 10px; }
.with-margin li::before { margin-left: -10px;}
<ul> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li></ul>
<ul class="with-margin"> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li> <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li></ul>
Related Topics
Is It Necessary to Write Head, Body and HTML Tags
How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height
Why Are My Css3 Media Queries Not Working on Mobile Devices
How to Line-Break from Css, Without Using ≪Br /≫
How to Avoid Joining All Text from Nodes When Scraping
Changing Image on Hover With Css/Html
Ie8 Support For CSS Media Query
Is Autocomplete="Off" Compatible With All Modern Browsers
Preventing Double Borders in CSS Grid
What Is Sr-Only in Bootstrap 3
Submit Form Using a Button Outside the ≪Form≫ Tag
A Space Between Inline-Block List Items
How to Set Tbody Height With Overflow Scroll
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
How to Add an HTML Link in the Body of a Mailto Link