[英]How to align the contents of the login form horizontally
我制作了一个登录表单,其中的内容垂直对齐。 我应该怎么做才能像facebook登录页面一样水平排列?
登录.html
<div class="login-form">
<form method="POST" class="post-form">
{% csrf_token %}
<h2 class="text-center">Log in</h2>
<div class="form-group">
{{ form | crispy }}
<div id='form-errors'>{{ form_errors }}</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</div>
<div class="clearfix">
<label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>
<a href="#" class="pull-right">Forgot Password?</a>
</div>
</form>
<p class="text-center"><a href="{% url 'register' %}">Create an Account</a></p>
</div>
表格.py
class LoginForm(forms.ModelForm):
class Meta:
model = User
fields = ("username", "password")
labels = {
'username': 'Username',
'password': 'Password'
}
这是我的 CSS 文件 login_style.css
.login-form {
width: 340px;
margin: 50px auto;
}
.login-form form {
margin-bottom: 15px;
background: #f7f7f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.login-form h2 {
margin: 0 0 15px;
}
.form-control, .btn {
min-height: 38px;
border-radius: 2px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
内容,即username
和password
文本字段或块垂直对齐,但我想在顶部水平对齐它们,而不是垂直对齐。 我该怎么做? 先感谢您!
我应该怎么做才能像facebook登录页面一样水平排列?
.login-form {
width: 100%;
text-align: center;
}
内容,即用户名和密码文本字段
<div class="form-group centered">
{{ form | crispy }}
<div id='form-errors'>{{ form_errors }}</div>
</div>
.login-form .centered {
text-align: center;
}
我认为您需要放入 form-inline 类,因为我看到您正在使用引导程序并且您需要添加此类。 我添加一个例子。 示例 w3schools
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.