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

在水平菜单中划分线

1 个答案: