Angular material 布局问题

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>

我有 css 和 material angular 的 js 依赖项和 material angular 库本身在我的 index.html

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

此外，当我运行我的应用程序时，我可以看到花哨的浮动标签，当我 select 文本框时它是 'glows' 蓝色，所以我知道我已经添加了 angular material lib 正确。

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

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

Angular material 布局问题

Trouble with Angular material Layouts

html

angular-material