5em (i.e., set margin: 0 0 0 1.5em or padding: 0 0 0 1.5em).
The difference is that if you set padding-left, any background applied to the list will
WORKING WITH TYPE
111
3
appear behind the bullet points, but if you set margin-left, it won??™t. Note that 1.5em is a
big enough value to enable the bullet points to display (in fact, lower values are usually
sufficient, too??”although take care not to set values too low, or the bullets will be
clipped); setting a higher value places more space to the left of the bullet points.
Inline lists for navigation
Although most people think of lists as being vertically aligned, you can also display list
items inline. This is particularly useful when creating navigation bars, as you??™ll see in
Chapter 5. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits
snug to the left of its container (omitting this tends to indent the list items). Adding a
margin-right value to li also ensures that the list items don??™t sit right next to each other.
Here??™s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
Thinking creatively with lists
The final part of this chapter looks at creating lists with a little panache. Although most
lists are perfectly suited to straightforward bullet points, sometimes some added CSS and
imagery can go a long way.
Pages:
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190