Reviewing some vintage CSS code from 2008, I stumbled upon the following CSS snippet for a menu/navigation:
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 32px;
margin: 0;
padding: 18px 30px 0 30px;
text-decoration: none;
text-transform: capitalize;
background: url(images/img03.jpg) no-repeat right top;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
HTML:
<div id='menu'>
<ul id='main'>
<li class='current_page_item'><a href='#'>Homepage</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<ul id='feed'>
<li><a href='#'>Entries</a></li>
<li><a href='#'>Comments RSS</a></li>
</ul>
</div>
Result: https://jsfiddle.net/wrsdh7yj/1/
I'm puzzled by the initial setting of list items to inline, followed by making anchor tags block and floating them to the left.
An elucidation would be greatly appreciated.
Please note that the background colors were added for visualization purposes.