I'm having some problems with my ul
-list after using applying CSS-reset.
When the text in the li
is long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.
Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the picture on the right.
How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.
Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.
You need to bring the bullet points inside the content flow by using list-style-position:inside; , and then center align the text.
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.
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
em
’sul
elementHere is a good example -
ul li{
list-style-type: disc;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Working Demo: http://jsfiddle.net/d9VNk/
I second Dipaks' answer, but often just the text-indent is enough as you may/maynot be positioning the ul for better layout control.
ul li{
text-indent: -1em;
}
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