Question

请问如何使用CSS覆盖角度材质中md-nav-item的默认高度。我有以下示例代码：

 <div ng-cloak>
<md-content class="md-padding">
  <md-nav-bar
  md-selected-nav-item="currentNavItem"
  nav-bar-aria-label="navigation links">
    <md-nav-item name="Page1" md-nav-click="goto('page2')">
      Link1
    </md-nav-item>
    <md-nav-item name="Page2" md-nav-click="goto('page2')">
      Link2
    </md-nav-item>
    <md-nav-item name="Page3" md-nav-click="goto('page2')">
      Link3
    </md-nav-item>
  </md-nav-bar>
  <div class="ext-content">
    {{currentNavItem}}
  </div>
</md-content>

另见plunker

上的示例

Answer 1

检查样式后，您可以执行以下操作来更改nabvar的高度：

PLUNKER （从角料版本工作＆gt; = 1.1.0）

.md-nav-bar, .md-nav-bar > nav, ._md-nav-bar-list, .md-button._md-nav-button{
  height: 50px;
}

.md-button._md-nav-button {
  padding: 0;
  min-height: 0;
}

**** 请确保在styles.css

中的angular-material.css文件后面加载index.html个文件

说明：您要求更改md-nav-item的高度，但实际上，此指令正在编写/转发ul._md-nav-bar-list .md-button._md-nav-button在每个li内。因此，您必须更改.md-button._md-nav-button的高度。但问题是按钮没有高度，它们有填充和最小高度。
甚至，主要的问题是.md-nav-bar有一个默认高度（48px），所以如果你改变它里面的项目的高度，它确实很重要，你必须首先覆盖这个默认高度。 br />

更改角度材质

1 个答案: