HTML and CSS Reference
In-Depth Information
Click here to view code image
1. <nav class="nav">
2. <ul>
3. <li> <a href="index.html">Home</a> </li><!--
4. --><li> <a href="speakers.html">Speakers</a> </li><!--
5. --><li> <a href="schedule.html">Schedule</a> </li><!--
6. --><li> <a href="venue.html">Venue</a> </li><!--
7. --><li> <a href="register.html">Register</a> </li>
8. </ul>
9. </nav>
Let's not forget to make these changes in all of our HTML files.
2. With the unordered list in place, let's make sure the list items align horizontally,
and let's clean up their styles a bit. We'll use the existing nav class to help target
our new styles.
We'll begin by setting all of the <li> elements within any element with the class
attribute value of nav to be displayed inline-block , to include some hori-
zontal margins, and to be vertically aligned to the top of the element.
Additionally, we'll use the :last-child pseudo-class selector to identify the
last <li> element and reset its right margin to 0 . Doing so ensures that any ho-
rizontal space between the <li> element and the edge of its parent element is re-
Within our main.css file, below our existing navigation styles, let's add the fol-
lowing CSS:
Click here to view code image
1. .nav li {
2. display: inline-block;
3. margin: 0 10px;
4. vertical-align: top;
5. }
6. .nav li:last-child {
7. margin-right: 0;
8. }
You may be wondering why our unordered list didn't include any list item markers
or default styles. These styles were removed by the reset at the top of our style
sheet. If we look at the reset, we'll see our <ol> , <ul> , and <li> elements all
include a margin and padding of 0 , and our <ol> and <ul> elements have a
list-style value of none .
Search WWH ::

Custom Search