Question

I am working on a new home page, trying to avoid images as much as possible and I have a slight issue with the borders on the Nav bar. I can’t really think of a way to get the sides of the borders to link into each other with padding. At the moment the sides are not touching so it doesn’t look continuos. I may be missing something obvious but I can’t think of a way to meet them up. Any one have any ideas?

The only way I can think to solve this is with classes on each of the li elements but am wondering if there is an optional way.

Here is a Fiddle for you to check :

http://jsfiddle.net/WZF4M/

Answer 1

You may want to use the following in li styling? A tweak though; not tested in all browsers.

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

Option 2:-

A more elegant solution right here at SO.

How do I remove extra margin space generated by inline blocks?

You may have to make changes to your html for this.

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>