角度のある材料レイアウトの問題

Question

角度材料のレイアウト機能を使用して、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に

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

を材料角度のCSSやJSの依存関係や材料の角度libに自身を持っていますapp私は空想的な浮動ラベルを見ることができ、それはテキストボックスを選択すると '輝く'青であるので、角材料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">