Question

我的导航菜单出现问题。这是我的CSS：

ul.main {
        background-color: #CCC;
        display: inline-block;
}

ul.main > li {
        list-style-type: none;
        display: inline-block;
        position: relative;

}

ul.subNav {
        background-color: #333;
        color: #FFF;
        padding: 0;
        margin: 0;
        position: absolute;
}

ul.subNav li {
        list-style-type: none;
        padding: 0;
        margin: 0;
}

我要做的是让我的子导航与菜单中最长的子项一样宽，以便ul.subNav与最长的li一样宽。我似乎无法实现这一点。

我在这里做错了什么？

Answer 1

如果我理解正确，您的subNav white-space: nowrap元素需要li：

ul.subNav li {
        list-style-type: none;
        padding: 0;
        margin: 0;
        white-space: nowrap;
}

这是一个working demo。如果您想了解更多信息，请点击以下链接：

Answer 2

杰罗恩是对的，他打败了我。 white-space: nowrap;会做到这一点。这是我演示的2个工作演示：

with nowrap

without nowrap

子导航与最长的子项目一样长

2 个答案: