导航菜单中的垂直线

Question

如何在li元素之间的导航菜单中执行这样的一行（白色）？

AndroidManifest.xml

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 */
}