Angular Material md-item-list css 错误

Question

我正在尝试制作教程“https://github.com/angular/material-start/tree/master”，但我对 md-list 和 md-list-item 指令有疑问。我在底部发布了我的代码。我遇到的问题是，md-list-items 之间的 space 与站点的高度一样大。有谁知道为什么会这样或者我在这里做错了什么？

谢谢帕特

screenshot

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    var app = angular.module('BlankApp', ['ngMaterial']);
    app.controller('MyController', function ($scope, $mdSidenav) {
        $scope.openLeftMenu = function () {
            $mdSidenav('left').toggle();
        };
    });
</script>

</body>
</html>

Answer 1

我更新了加载的文件以匹配 Angular Material 演示的文件，问题不再存在。

如果有人想知道如何重现问题，请将问题中的标记复制并粘贴到文件 (test.html) 中，然后在 Chrome 中打开文件。下面的标记将正确显示。

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    var app = angular.module('BlankApp', ['ngMaterial']);
    app.controller('MyController', function ($scope, $mdSidenav) {
        $scope.openLeftMenu = function () {
            $mdSidenav('left').toggle();
        };
    });
</script>

</body>
</html>

Angular Material md-item-list css 错误

Angular Material md-item-list css bug

angularjs

angularjs-material