角度材质:每个md-list-item占据整个页面宽度，Sidenav的滚动条较长 [英] Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

问题描述

我正在尝试使用菜单项列表来创建有角度的材质sidenav.当我在本地计算机上运行代码时，每个md-list-items都会占据整页宽度，并且sidenav的滚动条会很长.

I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.

但是当我在codepen.io上运行相同的代码时，它显示正确.

But When I run the same code on codepen.io, It displayed correctly.

<section layout="row" ng-controller="AppCtrl">
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
        <md-toolbar ng-controller="LeftCtrl">
            <div class="md-toolbar-tools">
                <h1>Sidenav Right</h1>
                <span flex></span>
                <md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
                    <md-tooltip md-direction="right">Close this menu</md-tooltip>
                    <md-icon md-font-icon="material-icons">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-content flex role="navigation">
             <md-list>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
            </md-list>
        </md-content>
    </md-sidenav>

    <md-content flex>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
                    <md-icon md-font-icon="material-icons">menu</md-icon>
                </md-button>
                <h2>
                    <span>Application Title</span>
                </h2>
            </div>
        </md-toolbar>
    </md-content>
</section>

这是代笔: http://codepen.io/nhere/pen/yOwJxE

推荐答案

尝试使用以下结构

<md-list>
  <md-item>
    <md-item-content>
       [Content Here]
    </md-item-content>             
  </md-item>
</md-list>

这篇关于角度材质:每个md-list-item占据整个页面宽度，Sidenav的滚动条较长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！