html - 无法将输入和按钮与 Angular 对齐

Question

我在将输入和按钮对齐在同一行时遇到了一些问题。我刚开始使用 Angular-Material，但我似乎找不到任何说明如何解决我的问题的文档或论坛。

我可以通过让 md 按钮位于表单和 flex 之外来使其工作，但这会停止按回车和提交的自然功能。

它是这样的:

这就是我想要的样子:

如何使用 Angular-Material 正确地做到这一点？

HTML

<div layout="row" layout-align="center center">
  <div class="bannerCenter" flex-sm="90" flex-gt-sm="60">
    <div layout="row" layout-align="center end" style="height: 100px;">
      <h1><span class="icon-bunny-logo text-purple logo-large"></span><span class="icon-text-logo text-black logo-text-large"></span></h1>
    </div>
    <md-content class="text-black md-content-transparent" flex layout-padding>
      <p class="banner-text banner-text-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.</p>
      <p class="banner-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.
      </p>
      <p class="banner-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sagittis sapien. Quisque et tincidunt orci. In hac habitasse platea dictumst. Nam luctus leo sit amet aliquet tincidunt. Donec nec elementum nunc. Nam ut pretium elit. Mauris mollis et neque eu rutrum.
      </p>
    </md-content>

    <div class="banner-text-top" layout="row" layout-align="center center" layout-wrap>
      <div flex="65">
          <form name="subscriptionForm">
            <md-input-container class="md-block">
              <label class="text-black">Email Address</label>
              <input class="bigClass text-black" ng-model="something.email" type="email" ng-required="true">
            </md-input-container>
            <md-button type="submit" class="md-raised" ng-click="something.save(newSomething); newSomething='';">Submit</md-button>
          </form>
        </div>
    </div>
  </div>
</div>

Answer 1

问题在于您在 md-input-container 中使用了 md-block 类。

这是一支工作笔:http://codepen.io/anon/pen/GoRxGP

最好!