链接在角度材料中填充侧边栏的整个宽度

Question

我试图重现https://material.angularjs.org/latest/#/的侧边栏。 我从HTML源代码中获取了一些代码。我遇到的问题是链接（用作按钮）不占用整个宽度（FOOBAR悬停）：

当我悬停angularmaterial的网站侧边栏时，该链接占据了导航栏的整个宽度（自动填充功能已悬停）：

以下是我使用的代码：

<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>

我没有使用custom-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/