Question

我想要做的是在左侧有一个带有实线边框的垂直列表，但每个li之间有1或2个px空间。我不能使用margin-bottom，因为边界会破裂。我最终试图在它的左侧（没有空格）有一个纯色的列表，当我将单个li悬停在实际左边时，在现有边界上。我不打算使用边框，但我已经尝试用包装div来做它我似乎无法正确，所以任何建议都是受欢迎的：）哦，垂直列表将改变高度，所以只是把一个div作为一个没有高度自动到列表元素的背景是没有去的。这是工作链接http://jsfiddle.net/hDHDF/，我有以下代码

<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span><a href="#">###</a></span></li>
<ul class="categories">
<li class="subcategory"><span><a href="#">###</a></span></li>
<li class="subcategory"><span><a href="#">###</a></span></li>
<li class="subcategory"><span><a href="#">###</a></span></li>
</ul>
<li class="maincategory"><span><a href="#">###</a></span></li>

</ul>
</div>

和相应的css：

#menu{
    position:absolute;
    right:0px;
    left:0px;
    top:120px;
    height:auto;
    width:190px;
    margin-top: 35px;
    margin-left:67px;
}
.menu {
    list-style-type:none;
    padding-right:10px;
    color:#6c6762;
}

.maincategory{
    background-color:#ada397;
    height:40px;
}
.openmaincategory{
    height:40px;
    background-color:#ada397;
}

.menu li a{
    display:inline-block;
    height:100%;
    width:100%;
}

.menu li{
    border-left:solid #6c6762 40px;
}

.menu li:hover{
    border-left:solid #6c6762 20px;
    padding-left:10px;
}

.menu span a{
    color:#5b5856;
    font-size:20px;
    padding-left:4px;
    padding-top:6px;
}

.menu a{
    text-transform:none;
    text-decoration:none;
    color:#6c6762;
}

.subcategory {
    background-color:#d7d1c9;
    height:40px;
}

Answer 1

听起来你想要使用填充而不是边距。我根据您的代码设置了一个示例here。

关键部分是将子类别类别移动到li的范围并添加.last，这样您就可以使用最终间距。

.categories li span{
    background-color:#d7d1c9;
    height:40px;
    padding-top:2px;
}

.subcategory .last{
    padding-bottom:2px;
}

使用最后一个li上的锚点的填充进行更新。

Answer 2

列表上有边框，而不是列表项。

Answer 3

我通过将边框添加到列表本身并使悬停效果margin-left：-20px来修复它。

需要一种方法来隔离垂直li而不会间隔相应的边框

3 个答案: