0

我想要做的是在左侧有一个带有实心边框的垂直列表，但每个 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;
}
4

3 回答 3

2

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

关键部分是将子类别类从 li 移动到跨度并添加 .last 以便您可以使用最终间距。

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

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

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

于 2012-09-02T04:29:46.967 回答
1

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

于 2012-09-02T05:00:41.307 回答
0

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

于 2012-09-05T07:51:19.533 回答