Question

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

由于专利

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 bug

1 个答案: