[英]Simple CSS modifications with Angular-Material
it's with a sense of mild despair that I am asking for help with this, but I cannot seem to change the positioning of a button relative to some input boxes ?!?!?!?! 我希望对此有所帮助,但是我似乎无法改变按钮相对于某些输入框的位置。 I am using Angular Material, and have created this: 我正在使用Angular Material,并创建了以下代码:
Obviously, I would like the sign In button to vertically align with the input fields, but nothing I have tried will make it budget without moving the other elements. 显然,我希望“登录”按钮与输入字段垂直对齐,但是我尝试过的任何事情都不会使它预算而不移动其他元素。 Any help would be much appreciated! 任何帮助将非常感激!
Here is my code: 这是我的代码:
<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: 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>
try to use div
tag to wrap each row in you form and then you can apply layout-align attribute to that 尝试使用div
标签将表单中的每一行包装起来,然后可以将layout-align属性应用于该行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.