角度材质：每个md-list-item占用整页宽度，Sidenav有长滚动条

Question

我正在尝试使用菜单项列表创建角度材料sidenav。当我在本地机器上运行代码时，每个md-list-items占用整页宽度，sidenav具有长滚动条。

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

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

以下是codepen：http://codepen.io/nhere/pen/yOwJxE

Answer 1

尝试使用以下结构

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