升级角度材料打破了md输入断线

Question

当我运行旧的材料版本时，我有这个登录表单。 我决定升级以使用新功能。

更新后，表单中断了，而不是在不同的行上显示输入，它们显示在下面的相同行中：

在更新之前

更新后

这是代码：

<div class="form-container">
            <form class="form-horizontal" action="javascript:;">

                <md-input-container md-no-float>
                    <label>Email</label>
                    <input type="email" placeholder="Enter your email" ng-model="email" required>
                </md-input-container>     

                <md-input-container>
                    <label>Password</label>
                    <input type="password" placeholder="Type your password" ng-model="password" required>
                </md-input-container>
    </form>

</div>

可能出现什么问题？

Answer 1

在class="md-block" s - CodePen

上使用md-input-container

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <div class="form-container">
    <form class="form-horizontal" action="javascript:;">

      <md-input-container md-no-float class="md-block">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" ng-model="email" required>
      </md-input-container>     

      <md-input-container class="md-block">
        <label>Password</label>
        <input type="password" placeholder="Type your password" ng-model="password" required>
      </md-input-container>
    </form>
  </div>
</div>

编辑：上面的方法是正确的Angular Material方式，但是如果你想减少两个输入之间的差距，只需使用一点CSS - CodePen

标记

<md-input-container class="md-block" id="password">

CSS

#password {
  margin-top: -10px
}