css - 水平菜单 - 背景色

Question

我有一个水平菜单。我想在菜单周围有一个边框(不是整行，只有空间菜单被覆盖)。当我在 ul 上放置边框时，它覆盖了整行，当我在 li 上放置边框时，它在菜单项之间也有边框。

<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>

这是 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

杀死列表项上的 display: inline 并将它们向左浮动。也让容器漂浮起来，这将确保它的宽度与其内容物一样宽。最后，在 ul 上设置 overflow: hidden。