Question

我正在编写一个包含材质设计精简版的菜单，我需要在此菜单中的两类项目之间使用分隔符。

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

在这个例子中，我希望能够划分两个不同的类别。在示例中，“旅行计划”和“图层”是一些与地图相关的小部件，而“帮助”和“发送反馈”则更多信息相关。

具体来说：

<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

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

Answer 2

您可以设置单独的一行，就像您说的那样。 <hr>标记定义HTML页面中的主题中断（例如主题的转移）。试试这个：

<强> HTML

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

<强> DEMO HERE

注意：您可以通过CSS设置<hr> - https://css-tricks.com/examples/hrs/

的样式

菜单分隔符与材料设计精简版

2 个答案: