Question

我有一个菜单，基于嵌套的无序列表。所有样式和显示都是通过CSS完成的。

菜单包含在固定宽度的div中。对于某些顶级项目，子菜单包含一行的太多项目，这些项目将换行到第二行甚至第三行，从而扩展div高度。这很好。

我想要做的是在子菜单项的行之间添加水平线/分隔线/边框，不管行数，并且宽度等于下面或上面的行（优选地在下面）。显然，如果只有一行项目，则不会出现任何行。

我尝试在整个<ul id="submenu">的顶部添加背景，然后使用ul#submenu:first-line{}从第一行删除它，然后意识到这不能完成（headlap）。

然后我改变了菜单的结构以使用嵌套在div中的<p>元素，再次使用div#submenu:first-line{}，但测试这给我带来了奇怪的结果。例如，背景颜色将显示在第一行，但只有子菜单项的高度的一半;背景图像出现在子菜单项的中间。有时在我点击当前顶级菜单项之前没有显示任何内容。

我甚至尝试使用包含一系列<p>元素的单个<a>元素替换列表结构，并获得相同的结果。

证据表明我没有正确使用:first-line伪元素，但在网上阅读表明这应该有效。

关于我做错了什么以及如何获得这些水平线的任何建议，最好是使用CSS而不使用JS？

这是我的代码：

#subMenuContainer {
    width:100%;
    margin-top:20px;
}
#subMenu {
    width:600px;
    margin:0 auto;
    text-align:center;
    background:#ddd;
}
#sub {
    border-top:2px solid green;
    padding:0px;
    line-height:30px;
}
#sub::first-line {
    border-top:2px solid red; /* doesn't work */
    background-color:pink; /* works */
    color:yellow; /* doesn't work */
}
#sub p {
    display:inline-block;
    padding:0px;
}
#sub p a {
    padding:0px 0px;
    line-height:1em;
}
<div id="subMenuContainer">
    <div id="subMenu">
        <div id="sub" >
            <p><a href="#">MenuItem1</a></p>
            <p><a href="#">MenuItem2</a></p>
            <p><a href="#">MenuItem3</a></p>
            <p><a href="#">MenuItem4</a></p>
            <p><a href="#">MenuItem5</a></p>
            <p><a href="#">MenuItem6</a></p>
            <p><a href="#">MenuItem7</a></p>
            <p><a href="#">MenuItem8</a></p>
            <p><a href="#">MenuItem9</a></p>
            <p><a href="#">MenuItem10</a></p>
        </div>
    </div>
</div>

the same in jsfiddle.

Answer 1

我认为你应该使用：first-child而不是：first-line伪类。

：第一行是指文本元素的第一行
：first-child是指父级的第一个子元素。例如ul。中的第一个li。

有关详细信息，请参阅http://www.w3schools.com/css/css_pseudo_classes.asp。

如果不能解决问题，您可以发布标记吗？

诉

如何在包装，水平多行菜单的行之间放置边框？

1 个答案: