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/avarih/edit#html,live
演示（带图片）：http: //jsbin.com/avarih/2/edit#html,live