Ссылка заполняет всю ширину боковой панели в угловом материале

Question

Ссылка заполняет всю ширину боковой панели в угловом материале

0

Я пытаюсь воспроизвести боковую панель https://material.angularjs.org/latest/#/. Я беру немного кода из источника HTML. Проблема в том, что ссылки (используемые как кнопки) не принимают полную ширину (FOOBAR зависает):

Когда я навешиваю боковую панель веб-сайта с угловым материалом, ссылка занимает всю ширину навигационной панели (автообновление зависает):

Вот код, который я использую:

<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 (только тот, который предоставляется материальным дизайном).

спасибо за помощь

Epitouille 29 сен. 2015, в 18:35

Источник

Теги:

html

angularjs

css

angular-material

sidebar

1 ответ

Ещё вопросы

Phillip Chan · Answer 1 · 2015-09-29T16-13-00.000Z

Это просто вопрос настройки вашего якорного 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/