Creating Lists - Learn to Code HTML and CSS: Develop and Style Websites - page 166

3. margin: 0 10px;
4. }
Figure 8.11 An unordered list with each <li> element displayed with an inline-
block property value
Floating List
Changing the display property value to inline or inline-block is quick;
however, it removes the list item marker. If the list item marker is needed, floating each
<li> element is a better option than changing the display property.
Setting all <li> elements' float property to left will horizontally align all <li> ele-
ments directly next to each other without any space between them. When we float each
<li> element, the list item marker is displayed by default and will actually sit on top of
the <li> element next to it. To prevent the list item marker from being displayed on top
of other <li> elements, a horizontal margin or padding should be added (see Figure
8.12 ) .
HTML
1. <ul>
2. <li>Orange</li>
3. <li>Green</li>
4. <li>Blue</li>
5. </ul>
CSS
1. li {
2. float: left;
3. margin: 0 20px;
4. }
Figure 8.12 An unordered list with each <li> element floated to the left
As when floating any element, this breaks the flow of the page. We must remember to clear
our floats—most commonly with the clearfix technique—and return the page back to its
normal flow.