Question

我在同一行上对齐输入和按钮时遇到一些麻烦。我是使用Angular-Material的新手，但我似乎无法找到解释如何解决我的问题的任何文档或论坛。

我能够通过让md按钮位于窗体外面并弯曲来使其工作，但这会停止按下输入和提交的自然功能。

这就是它的外观：

这就是我想要的样子：

如何使用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-block中的md-input-container课程。

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

最佳！

Answer 2

这对我有用

devise_for :users, controllers: { registrations: "registrations" }

Answer 3

我最终自己解决了这个问题。我基本上重新开始并提到了Material-Angular documentation demonstrating inputs。这就是我最终解决这个问题的方法：

<强> HTML

<form name="subscriptionForm">
  <div layout layout-align="center center">
    <div layout layout-align="center center" layout-sm="column" flex="65">
      <md-input-container flex>
        <label class="text-black">Email Address</label>
        <input class="text-black" ng-model="newSomething.email" type="email">
      </md-input-container>
      <md-button layout="column" class="md-raised" ng-click="something.save(newRSomething); newSomething='';">Submit</md-button>
    </div>
  </div>
</form>

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

3 个答案: