Question

I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.

<ul id="menu" style = "text-align:left;">  

                    <li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...</li>
                </ul>

Here is the CSS:

ul#menu
{
    padding: 0 0 0px;
    position: relative;
    margin: 0 0 0;
    text-align: right;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul#menu li
{
    display: inline;
    list-style: none;
}


ul#menu li a
{
    padding: 0px 0px;
    margin-right:20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
}

Answer 1

Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it’s only as wiide as its contents. Finally, set overflow: hidden on the ul.