Recipe 5.10. Moving the Marker Inside the List

Problem

You want the list marker to be pulled inside the border of the list items, as in Figure 5-17. This creates an effect in which the text wraps around the marker.

Figure 5-17. Moving the marker inside the list item

Solution

Use the list-style-position property and set the value to inside:

li {  list-style-position: inside;  width: 33%;  padding: 0;  margin: 0; } ul {  margin: 0;  padding: 0 0 0 1em; }

Discussion

Normally the list marker stands outside the text and the result is a very distinctive list. Some designs, however, may require the marker to appear as part of the text. A designer may choose to keep the marker inside, for example, to eliminate the need to have enough whitespace on the left side. Also, replacing the list marker with your own custom marker can visually enhance this recipe. For example, Figure 5-18 shows arrows rather than the default bullet.

Recipe 5.10. Moving the Marker Inside the List

Problem

Figure 5-17. Moving the marker inside the list item

Solution

Discussion

Figure 5-18. Custom marker inside the list item

See Also