Html 导航菜单中的垂直线

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

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

信息
排行榜
做
奖品
规则

---

< P>如果你想在每个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>

信息
排行榜
做
奖品
规则

李{
边框顶部：1px纯白；
垫面：1px；
垫底：1px；
}

每个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>

信息
排行榜
做
奖品
规则

李{
左边框：1px纯白；
左侧填充：1px；
}

您可以使用

：before

伪元素来设置垂直分隔线的样式

看看这个

---

好的，那么您的

li

元素是水平排列还是垂直排列呢。那条线又分什么？

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