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

使用ul声明display:inline-block。它会导致ul只占用显示其内容所需的空间，而不是100％。

An example

Answer 2

在display: inline-block上使用ul，并将边框添加到ul。

Answer 3

如果您需要IE6兼容性：

#menu li {
    border-top: 1px solid #000;
    border-bottom: 1px solid #00;
    }

您可以使用li:first-child（我记不起来，并且没有IE6的副本进行测试）来申请：

#menu li:first-child {
    border-left: 1px solid #000;
    }

但您可能需要在class个元素或id元素中添加li个名称，以便为其提供相应的border-left和border-right。

Answer 4

在列表项上杀死display: inline并向左浮动它们。同时浮动容器，这将确保它仅与其内容一样。最后，在ul。

上设置overflow: hidden

css - 水平菜单 - 背景颜色

4 个答案: