HTML and CSS Reference
In-Depth Information
Example 2.17: HTML and CSS for vertical and horizontal lists
<!DOCTYPE html>
<html>
<head>
<title>Example 2.17</title>
<style type="text/css">
body { padding: 36px; }
menu li {
float: left;
list-style: none;
margin-right: 8px;
border: 2px solid;
padding: 4px;
}
</style>
</head>
<body>
<h2>
Vertical and Horizontal lists
</h2>
<ul>
<li>
Gold
</li>
<li>
Silver
</li>
<li>
Bronze
</li>
</ul>
<menu>
<li>
Gold
</li>
<li>
Silver
</li>
<li>
Bronze
</li>
</menu>
</body>
</html>
In this example, it is not the
menu
element that creates the horizontal
toolbar. he CSS rules in the
style
element operate on each list item in the
menu
element, causing it to loat up on the right of the previous list item. he
