HTML and CSS Reference
In-Depth Information
1.
ul {
2.
list-style: circle inside;
3.
}
4.
ol {
5.
list-style: lower-roman;
6.
}
Horizontally Displaying List
Occasionally we may want to display lists horizontally rather than vertically. Perhaps we
want to divide a list into multiple columns, to build a navigational list, or to put a few list
items in a single row. Depending on the content and desired appearance, there are a few
different ways to display lists as a single line, such as by making the
display
property
value of
<li>
elements
inline
or
inline-block
or by floating them.
Displaying List
The quickest way to display a list on a single line is to give the
<li>
elements a
display
property value of
inline
or
inline-block
. Doing so places all the
<li>
elements
within a single line, with a single space between each list item.
If the spaces between each of the
<li>
elements are troublesome, they may be removed
using the same techniques we discussed in
Lesson 5
,
“
Positioning Content
.
”
More often than not, we'll use the
inline-block
property value rather than the
in-
line
property value. The
inline-block
property value allows us to easily add vertical
margins and other spacing to the
<li>
elements, whereas the
inline
property value does
not.
When changing the
display
property value to
inline
or
inline-block
, the list
item marker, be it a bullet, number, or other style, is removed (see
Figure 8.11
).
HTML
1.
<ul>
2.
<li>Orange</li>
3.
<li>Green</li>
4.
<li>Blue</li>
5.
</ul>
CSS
1.
li {
2.
display: inline-block;
Search WWH ::
Custom Search