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

Question

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

我可以通过将 md 按钮置于表单和 Flex 之外来使其工作，但这会阻止按 Enter 键和提交的自然功能。

这就是它的样子:

这就是我想要的样子:

如何使用 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

最好!