Styling navigation bar: alternative to display:table/table-cell - html

Question

For a website project, we have a simple navigation bar where each link is outlined in gray, and hovering outlines it in black.
I got it working and my code is here: http://jsfiddle.net/BpjK8/ -- although I admit it's a little dirty and 'hacky' in a way. (You can see when hovering link A, the border of link B beside it is visible, making it somewhat distracting.)
My question is: can this be done in a better way without using display: table and display: table-cell? It would be nice if the answer involved display: inline or float: left but I can't get the border effect working properly.

Answer 1

Demo Fiddle
Of course! Add:
body{
text-align:center; /* centre the content */
}
Then set your ul to display:inline-block to allow it to be subject to the centering, and give your li:
float:left;
display:block;
So they display one after another correctly.
You may not want to centre your entire document however, so instead you may want to wrap the ul in a div with text-align:center; set.

Answer 2

Try this css:
ul {
margin: 50px auto;
list-style:none;
}
li {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #fff;
padding: 2px;
}
li:last-child {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #CECECE;
padding: 2px;
}
li:hover {
border: 2px solid #000;
position: relative;
z-index: 9999;
padding: 1px;
}
a {
position: relative;
text-decoration: none;
line-height: 40px;
padding: 20px;
color: #000;
}