导航菜单中的垂直线

Question

我怎样才能在 li 元素之间的导航菜单中做这样一行（白色的）？

<ul>
<li>Info</li>
<li>Leaderboard</li>
<li>To do</li>
<li>Prizes</li>
<li>Rules</li>
</ul>

Answer 1

如果您想在每个 LI 项目的左侧或中间放置一个边框，您可以这样做..

每个 LI 元素之间的边框..

    <ul>
    <li>Info</li>
    <li>Leaderboard</li>
    <li>To do</li>
    <li>Prizes</li>
    <li>Rules</li>
    </ul>

    <style>
    li {
        border-top: 1px solid white;
        padding-top: 1px;
        padding-bottom: 1px;
    }
    </style>

每个 LI 元素左侧的边框

    <ul>
    <li>Info</li>
    <li>Leaderboard</li>
    <li>To do</li>
    <li>Prizes</li>
    <li>Rules</li>
    </ul>

    <style>
    li {
        border-left: 1px solid white;
        padding-left: 1px;
    }
    </style>

Answer 2

您可以使用:before伪元素来设置垂直分隔线的样式。

看看这个jsFiddle

li:before{
    content: '';
    border-left: 1px solid #000;
}
li:first-child:before{
    content: none; /* Remove the divider from the first item */
}