Indenting Second Line of LI (List Items) in CSS

I work a lot with graphic designers who use publishing packages like Quark and InDesign. They have little quirks when it comes to laying out text. For example when a list item wraps, these packages indent the second line automatically.

CSS doesn’t. It drives them and myself mad.

Margins and paddings are not very helpful.  The text-indent property with minus value helps to get the next lines properly indented;
Simply add the following to your CSS.
[codesyntax lang=”css”]
.cssClass li{
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
}

Author: Kieran Barnes

Kieran is a PHP developer with 15 years commercial experience. Specialist in WordPress, CakePHP, CubeCart and all things PHP.

1 thought on “Indenting Second Line of LI (List Items) in CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *