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

【问题标题】：Create space between left border of vertically aligned list items在垂直对齐的列表项的左边框之间创建空间
【发布时间】：2014-07-01 16:44:51
【问题描述】：

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

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/

【问题讨论】：

标签： css list border space navbar

【解决方案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

【讨论】：

这么简单！我很惭愧;|