链接在angularmaterial中填充边栏的全宽

Question

我正在尝试重现https://material.angularjs.org/latest/#/的侧边栏。我从HTML源代码中提取了一些代码。我遇到的问题是，链接(用作按钮)不会采用全宽(FOOBAR悬停)：

​

​

当我悬停angularmaterial的网站侧边栏时，链接占据导航栏的整个宽度(Autocomplete被悬停)：

​

​

下面是我使用的代码：

<div ng-controller="SidebarCtrl" layout="column" flex>
  <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" flex>
    <ul class="side-menu">
      <li ng-repeat="item in menu">
        <a class="md-button" ng-class="{'active' : isSelected()}">
          <span class="ng-binding ng-scope">
            {{item.label}}
          </span>
        </a>
      </li>
    </ul>
  </md-sidenav>
</div>

我没有使用自定义css(只使用material-design提供的css)。

谢谢你的帮助

Answer 1

只需将你的锚的CSS设置为display: block和width: 100%即可。

下面是一个示例：

li {
    list-style-type: none;
    width: 100%;
}

li a {
    width: 100%;
    background: #106CC8;
    padding: 5px 10px;
    display: block;
    color: #fff
}

然后，您只需正确设置字体和间距即可。

这里有一个可以帮助你入门的JSFiddle：http://jsfiddle.net/u03znojv/2/