Question

我想在每个列表项的右边（最后一个除外）旁边放一条小垂线但是我想知道是否有办法除了添加一个新的div或其他东西以容纳该行之外。我尝试为列表添加一个边框线，但它增加了一个比我需要的更多。

HTML

<ul class="list">
            <li><span id = "home">Home</span></li>
            <li><span id = "about">About</span></li>
            <li><span id = "portfolio">Portfolio</span></li>
            <li><span id = "contact">Contact</span></li>
        </ul>

CSS

.list li {
display: inline;
margin: 0px 25px 0px 0px;
white-space: nowrap;
font-family: Oswald;
color: white;
}

.list {
    text-align: right;
    padding-right: 2%;
    }

#home {
height: 50px;
background-color: black;

}

Answer 1

只需向所有li元素添加右边框，然后使用:last-child伪类将其从最后一个元素中删除。这适用于动态内容。

Example Here

.list li {
    display:inline-block;
    border-right:2px solid;
    padding:10px;
}
.list li:last-child {
    border-right:none;
}

或者，你也可以使用:not()伪类，并避免将边框应用到最后一个元素开始。

Example Here

.list li:not(:last-child) {
    border-right:2px solid;
}

可以在此处找到对这两种方法的支持 - http://caniuse.com/#feat=css-sel3

如果需要支持，您也可以添加左边框并将其从第一个子元素中删除。（:first-child的浏览器支持率高于:last-child / :not。我怀疑你需要支持旧版本的IE。

Example Here

.list li {
    display:inline-block;
    border-left:2px solid;
    padding:10px;
}
.list li:first-child {
    border-left:none;
}

Answer 2

您可以通过在每个<li>项目上添加边框，然后使用css last child selector删除最后一个元素的边框来实现这一点：li:last-child选择其父级的最后一个li元素。

您甚至可以将其与:not选择器结合使用，以通过一个css块实现它。

JSFiddle Demo

Answer 3

我可能会在整个列表中设置一个border-right，并使用jQuery将其删除到最后一项。

如果您事先不知道最后一项的ID，这会有点棘手，但如果它总是在＆＃34;联系，＆＃34;你可以说

$("#contact").attr('style','border-right:none');

Answer 4

您可以添加：

li:before {
    content: " | ";
}
li:first-child:before {
    content: none;
}

或者：

li:not(:first-child):before {
    content: " | ";
}

Answer 5

这是一个更通用，更简单的解决方案，可以毫不费力地在旧版浏览器中使用：http://jsfiddle.net/pw3vpvLv/。

HTML：

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

CSS：

ul > li {
    display:inline-block;
    padding: 5px 10px;
}

ul > li + li {
    border-left: 1px solid;
}

在列表项旁边创建一条垂直线

5 个答案: