How to Build Horizontal Lists for HTML5 and CSS3 Programming

By Andy Harris

Sometimes, you want horizontal button bars. Because HTML5 lists tend to be vertical, you might be tempted to think that a horizontal list is impossible. In fact, CSS3 provides all you need to convert exactly the same HTML to a horizontal list.

image0.jpg

There’s no need to show the HTML again because it hasn’t changed at all. (Ain’t CSS grand?) Even the CSS hasn’t changed much:

#menu ul {
 margin-left: -2.5em;
}
#menu li {
 list-style-type: none;
 width: 7em;
 text-align: center;
 float: left;
}
#menu a {
 text-decoration: none;
 color: black;
 display: block;
 background-color: #EEEEFF;
 box-shadow: 5px 5px 5px gray;
 margin-bottom: 2px;
 margin-right: 2px;
 border-radius: 5px;
 border: 3px outset #EEEEFF;
}
#menu a:hover {
 background-color: #DDDDEE;
 box-shadow: 3px 3px 3px gray;
 border: none;
}

The modifications are incredibly simple:

  1. Float each list item by giving each li a float:left value:

    #menu li {
     list-style-type: none;
     float: left;
     width: 5em;
     text-align: center;
    }
  2. Move the margin-left of the entire ul by taking the margin-left formatting from the li elements and transferring it to the ul:

    #menu ul {
     margin-left: -2.5em;
    }
  3. Add a right margin.

    Now that the button bar is horizontal, add a little space to the right of each button so they don’t look so crowded together:

    margin-right: 2px;