Controlling Lists with CSS

A breakdown on how to create consistent list indents with css.

For the purposes of demonstration I will add thin gray borders and some spacing to separate the lists and list items.

ul.list {
border:1px solid #CCC;
margin:0 0 15px 0;
padding:1px;
}

.list li {
border:1px solid #CCC;
margin:0 0 2px 0;
padding:0;
}

Option #1: Adjust the padding-left for the list items with list-style-position set to "outside."

ul.list1 {
list-position:outside;
padding-left:1em; /* position the bullet inside the text block area */
list-style:disc; /* your preferred list style */
}

.list1 li {
padding-left:10px; /* desired spacing between text and bullet */
}

Here's what the lists look like.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Phasellus rhoncus neque ut risus posuere id tempor magna cursus.
• Vivamus porttitor placerat purus, vitae malesuada mi suscipit quis.

Advantages

• Doesn't requre an additional image reference.
• Bullet size increases proportionate to text size.

Disadvantages

• Limited to default list-style characters.
• Bullets are the same color as the text.
• Cannot position the list bullet or character vertically.

Option #2: Background images.

By using the backgound images on list items you can control the spacing and position of the bullet relative to the list text.

ul.list2 {
list-style:none; /* remove any default list item character */
}

.list2 li {
padding-left:25px; /* desired spacing between text and bullet */
background-image:url("/sites/default/files/images/article/55/bg_li_star_12px.png"); /* the image */
background-repeat:no-repeat; /* prevent the image from repeating */
background-position:0px 3px; /* position of the background image */
}

Here's what lists look like with background images. The default list-style is list-style-position:outside;.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Phasellus rhoncus neque ut risus posuere id tempor magna cursus.
• Vivamus porttitor placerat purus, vitae malesuada mi suscipit quis.

Advantages

• Customize the bullet to be any style.
• Adjust the bullet position both vertical and horizontal.

Disadvantages

• Adds an image file for a resource.
• Won't scale proportianate to text size.
• Doesn't work for ordered lists.