Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Second line in li starts under the bullet after CSS-reset

Tags:

html

css

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.

enter image description here

like image 840
OptimusCrime Avatar asked Jul 19 '12 08:07

OptimusCrime


People also ask

How do you get rid of Li bullet in CSS?

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.

How do you align text with bullet points in CSS?

You need to bring the bullet points inside the content flow by using list-style-position:inside; , and then center align the text.

How do you indent the second line of a paragraph in CSS?

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.

How do you indent Li in CSS?

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.


3 Answers

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 :)
like image 108
Tim S. Avatar answered Oct 09 '22 17:10

Tim S.


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

like image 43
Dipak Avatar answered Oct 09 '22 17:10

Dipak


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;
}
like image 29
Rajesh Rajan Avatar answered Oct 09 '22 17:10

Rajesh Rajan