带着轻微的绝望感,我正在寻求帮助,但我似乎无法改变按钮相对于某些输入框的位置 ?!?!?!?!我正在使用 Angular Material,并创建了这个:
显然,我希望登录按钮与输入字段垂直对齐,但我尝试过的任何方法都无法在不移动其他元素的情况下实现预算。任何帮助将不胜感激!
这是我的代码:
<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:
.navbar {
width: 100%;
background-color: #000;
height:75px;
padding-bottom: 20px;
}
最佳答案
<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归于那个
关于html - 使用 Angular-Material 进行简单的 CSS 修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35846550/