鏈接填充angularmaterial中的側欄的全部寬度

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> 

我不使用自定義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/