HTML and CSS Reference
In-Depth Information
Click here to view code image
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
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 ).
1. <ul>
2. <li>Orange</li>
3. <li>Green</li>
4. <li>Blue</li>
5. </ul>
Click here to view code image
1. li {
2. display: inline-block;
Search WWH ::

Custom Search