如何移除AngularJS Material中md-nav-list导航栏的边框

我之前也踩过这个坑，AngularJS Material的默认样式会给md-nav-list里的列表项自动加上底部边框，要去掉这条红色线条其实有几种简单可行的方案：

方案1：全局移除所有md-nav-list列表项的边框 #

直接在你的全局CSS文件里添加这段样式，就能一次性去掉所有md-nav-list中列表项的底部边框：

.md-nav-list md-list-item {
  border-bottom: none !important;
}

这里用!important是为了确保我们的样式优先级高于框架自带的默认样式，避免被覆盖。

方案2：仅移除指定列表项的边框 #

如果你只想去掉"页面一"下方的线条，不想影响其他列表项，可以给目标列表项加一个自定义类，比如no-bottom-border：

<md-nav-list>
  <md-list-item class="no-bottom-border">页面一</md-list-item>
  <md-list-item>页面二</md-list-item>
</md-nav-list>

然后对应添加CSS样式：

.md-nav-list md-list-item.no-bottom-border {
  border-bottom: none !important;
}

额外情况：如果是md-nav-bar的选中下划线（ink bar） #

看你代码里提到了md-nav-bar和md-no-ink-bar属性，要是这条红色线条是导航栏选中项的下划线，那可能是md-no-ink-bar属性没生效，你可以用CSS强制隐藏它：

.md-nav-bar .md-ink-bar {
  display: none !important;
}

记得把这些CSS代码放在能被正确加载的样式文件中，比如全局样式表或者组件对应的样式块里，确保能覆盖框架默认样式。

内容的提问来源于stack exchange，提问作者user9233898