Underlining navigation

[flycast]

I have some elements in a nav like this:

<div id="Nav">
<a href="1">First</a>
<a href="2">Second</a>
<a href="3">Third</a>
<a href="4">Fourth</a>
<a href="5">Fifth</a>
</div>

The CSS looks like this:

#Nav{
height: 20px;
background-color: #E8D5C0;
padding: 0;
margin: 0;
font-weight: bold;
display: inline;
border-bottom: gray 2px solid;
}
#Nav a{
padding: 0;
margin: 0;
text-decoration: none;
padding: 0 10px;
}

This is all good but because of the 10px padding before and after each <a> element the bottom border starts 10px before the first element and ends 10px after the last element. I want the border to start exactly at the start of the first element and end exactly at the end of the last element.

I could do this by using a class or ID for the first element and another one for the last element but don't wnat to mess up clean, simple code by having to set the right class or ID for the first or last elements.

I also don't want to put non breaking spaces after all but the last element. Inelegant.

Any ideas?

[Krapulator]

Use the DOM.

[Robin_reala]

Use first child and last child selectors. For example:

#Nav a:first-child{
padding-top: 0;
}
#Nav a:last-child{
padding-bottom: 0;
}

Of course this won't work in IE :) For that you're either going to have to resort to Javascript or classes.