html - 水平菜单中的分割线

Question

我有这个菜单 -

<div ><ul id="menu">
        <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
        <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
        <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
        <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
        <li><?php bp_adminbar_notifications_menu() ?>
        <ul>
        <li> </li>
        </ul>
        </li>
    </ul>

我可以在元素之间添加垂直分隔线吗？ 谢谢

Answer 1

您可以使用 :after 来放置它们:

#menu > li:after {
  content: '|' /* or url('divider.png'); */
}
#menu > li:last-child:after {
  content: none;
}

我怀疑这可能就是你想要的。但请注意，您的浏览器支持将在某种程度上仅限于更现代的浏览器。幸运的是，降级非常优雅，不会在旧浏览器上中断。

演示:http://jsbin.com/awarih/edit#html,live
演示(带图片):http://jsbin.com/awarih/2/edit#html,live