Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 187

indent and bullet or number each separate item, as well as placing line breaks in between items; and this is not
always desired. However, this is easy to fix with CSS. For example, to remove the bullets add this rule to the
page's CSS stylesheet:
ul {
list-style-type: none;
}
Or, instead of removing the bullet, you can add a custom bullet loaded from an image file with the list-style-
image property like so:
ul li {
list-style-image: url(images/star.gif)
}
To get rid of the indentation, add this rule:
ul {
margin-left: 0px;
padding-left: 0px;
}
Alternatively, you can set a different margin by increasing the value of these properties. If you like, you can also
play with the text-indent property, which indents just the first line. Negative values create hanging indents.
To place the list items on a single line use this rule:
ul, li {
display: inline;
margin: 0px;
padding: 0px;
}
To place a character such as a comma between list items add this rule:
ul li:after {
content: ", ";
}
This actually puts a comma after each list item, including the last. To avoid that, assign a special class to the
last item in the list, like so:
<li class="last">H.G. Wells</li>
Then add one extra rule just for this last item that overrides the earlier rule:
ul li.last:after {
content: "";
}