Tuesday, January 10, 2012

CSS - Indenting Second Line of LI (List Items)

It drives me crazy when I see that next line coming under the Bullet point. Here, margins and paddings are not very helpful.  The text-indent property with minus value helps us to get the next lines properly indented -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

11 comments:

  1. Thank you very mucg! :)

    ReplyDelete
  2. Exatly what I was looking for - thanks very much!

    ReplyDelete
  3. Amazing! Works like a charm across major browsers.

    ReplyDelete
  4. Thank you so much Dipak! Worked perfectly. I've been struggling with this issue for months. I can sleep easy at night now ;-)

    ReplyDelete
  5. <3 I was given control of a work-in-progress and this just made all the bad feelings go away. Thankyou.

    ReplyDelete
  6. You legend! This is a great solution :D

    ReplyDelete
  7. Thank You! helped me a lot!

    ReplyDelete