角度材质布局有问题

Question

我试图使用Angular Material的布局功能连续输入2个输入字段。

这是我的代码：

<div layout="row" layout-align="center">
        <div>
            <md-input-container>
                <label>Text 1</label>
                <input ng-model="query1">
            </md-input-container>
            <md-input-container>
                <label>Text 2</label>
                <input ng-model="query2">
            </md-input-container>
        </div>
</div>

我的index.html中有材质棱角的css和js依赖以及材质棱角的lib本身

<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>

<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>

另外，当我运行我的应用程序时，我可以看到花哨的浮动标签，当我选择文本框时它会“发光”为蓝色，所以我知道我已经正确添加了角度素材库。

我的问题： 当我将布局设置为行时，为什么我的输入容器会出现在另一个下面。

Answer 1

这可能会解决您的问题。评论说它使用的是CSS v1.0.7，但链接的是v0.11.2，这是测试版。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">