首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用Angular-Material进行简单的CSS修改

使用Angular-Material进行简单的CSS修改
EN

Stack Overflow用户
提问于 2016-03-07 22:43:01
回答 1查看 198关注 0票数 0

带着一丝绝望,我请求帮助,但我似乎不能改变按钮相对于某些输入框的位置?!我使用的是Angular材质,并创建了这个:

显然,我希望登录按钮与输入字段垂直对齐,但我尝试过的任何东西都不会在不移动其他元素的情况下使其成为预算。任何帮助都将不胜感激!

下面是我的代码:

代码语言:javascript
复制
  <div class="navbar">
    <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
      <form ng-submit="submitLoginForm()" class="navbar-form navbar-right">
        <md-input-container style="width:150px;">
          <label>Email</label>
          <input ng-model="loginForm.email" type="text" name="email" class="form-control">
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input ng-model="loginForm.password" type="password" name="password" class="form-control">
        </md-input-container>
        <md-button class="md-raised" type="submit">
          <span ng-show="!loginForm.loading">Sign in</span>
          <span ng-show="loginForm.loading" class="fa fa-spinner"></span>
          <span ng-show="loginForm.loading">Signing in...</span>
        </md-button>
        <input type="hidden" name="_csrf" value="<%= _csrf %>" />
      </form>
    </md-content>
  </div>

CSS:

代码语言:javascript
复制
.navbar {
    width: 100%;
    background-color: #000;
    height:75px;
    padding-bottom: 20px;
}
EN

回答 1

Stack Overflow用户

发布于 2016-03-09 16:22:45

代码语言:javascript
复制
<div layout="row" layout-align="center center">
 <md-input-container style="width:150px;">
      <label>Email</label>
      <input ng-model="loginForm.email" type="text" name="email" class="form-control">
    </md-input-container>
    <md-input-container>
      <label>Password</label>
      <input ng-model="loginForm.password" type="password" name="password" class="form-control">
    </md-input-container>
    <md-button class="md-raised" type="submit">
      <span ng-show="!loginForm.loading">Sign in</span>
      <span ng-show="loginForm.loading" class="fa fa-spinner"></span>
      <span ng-show="loginForm.loading">Signing in...</span>
    </md-button>
</div>

尝试使用div标记来包装表单中每一行,然后可以对其应用layout-align属性

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35846550

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档