html - 带有 Material 设计精简版的菜单分隔符

Question

我正在使用 Material Design Lite 编写菜单，我需要在该菜单中的两类元素之间使用分隔符。

我在这里重新创建了一个更简单的示例: http://codepen.io/anon/pen/jbJXQP

在这个例子中，我想用一些东西来分隔两个不同的类别。在示例中，“Trip planner”和“Layers”是一些与 map 相关的小部件，而“帮助”和“发送反馈”是更多相关信息。

具体在这里:

<li class="mdl-menu__item" 
  <i class="material-icons" >layers</i>  
     Layers</li>
<li class="mdl-menu__item" 
    onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
    Help</li>

我对网络开发相当陌生(几个月)，所以我真的不知道什么是好的解决方案。 对于分隔符，它需要引人注目但不会对用户造成干扰。我在想中间只有一条黑线，但我不知道这是否可能。

Answer 1

一个额外的 MDL 类(我不熟悉 MDL，但确定必须有一个，如果没有，只需创建一个)用于第一个可能具有顶部边框的特殊类型的菜单项将是最合乎逻辑的。

因此，我们假设每个信息列表项的第一个都有一个 info 类:

那么我们可以做。

.mdl-menu__item.info {
  border-top:1px solid lightgrey;
}

Codepen Demo

有多种技术可以选择要应用边框的列表项。