Angular 材质布局的问题答案

【问题标题】：Trouble with Angular material LayoutsAngular 材质布局的问题
【发布时间】：2016-09-17 05:25:27
【问题描述】：

我正在尝试使用 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 依赖项

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

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

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

【问题讨论】：

codepen.io/next1/pen/aNgqBb 工作正常。
它对我不起作用，知道可能是什么问题吗？
那里有父容器吗？加上你的图像标签是Text 1 和Text 2，在代码中是Text one 和Text two 那么这是该图像的正确代码吗？
更新代码以匹配屏幕截图中的文本。

标签： html angular-material

【解决方案1】：

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

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

【讨论】：