Question

我正在尝试制作一个垂直导航栏。我使用了一个无序列表，其中包含border-left propoerty，因此在悬停时，我可以更改边框的不透明度/颜色。现在的问题是，这个边框在列表项中显示为一条连续的线。我想在列表项之间包含一些空格，以便分隔边框，并且可以确定哪个边框属于哪个列表项。

HTML：

<div class="leftNavbar">
            <span class="navLine"></span>
            <ul>
                <li>Introduction</li>
                <li>Whats new?</li>
                <li>Gallery</li>
            </ul>
        </div>

CSS：

.leftNavbar{
    position: absolute;
    top: 100px;
    z-index: 500;
    left: 50px;
    vertical-align: middle; 
}
.leftNavbar ul{
    list-style: none;
}
.leftNavbar ul li{
    font-family: 'Sintony', sans-serif;
    height: 100px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 2px #000;
    vertical-align: middle;
    line-height:100px;
    border-left:4px solid blue;
}

JSFIDDLE：http://jsfiddle.net/ATQ4Q/

Answer 1

您可以为列表项添加边距。像margin-bottom:5px;：

这样的东西

.leftNavbar ul li {
    font-family:'Sintony', sans-serif;
    height: 100px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 2px #000;
    vertical-align: middle;
    line-height:100px;
    border-left:4px solid blue;
    margin-bottom:5px;
}

<强> jsFiddle example

在垂直对齐的列表项的左边框之间创建空间

1 个答案: