Menu
Output: Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.
You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements. Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px.
Hanging Indents A hanging indent is an indent that indents all text except for the first line. An example is below: There are a few ways to create hanging indents. On most computers, you can create a hanging indent by selecting the line you want indented and then holding down the Ctrl and T buttons at the same time.
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
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.
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/
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:
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With