以角材料链接文件侧边栏的全宽答案

【问题标题】：Link fills full width of a sidebar in angularmaterial以角材料链接文件侧边栏的全宽
【发布时间】：2015-09-30 01:37:47
【问题描述】：

我正在尝试重现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（只有 material-design 提供的那个）。

感谢您的帮助

【问题讨论】：

标签： html css angularjs sidebar angular-material

【解决方案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/

【讨论】：