我制作了一個登錄表單,其中的內(nèi)容垂直對齊。我應(yīng)該怎么做才能像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>表格.pyclass 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;}內(nèi)容即在username與password文本字段或塊垂直對齊的,但我想他們在頂部水平對齊,而不是垂直。我該怎么做?先感謝您!
2 回答

白豬掌柜的
TA貢獻(xiàn)1893條經(jīng)驗 獲得超10個贊
我應(yīng)該怎么做才能像facebook登錄頁面一樣水平排列?
.login-form {
width: 100%;
text-align: center;
}
內(nèi)容,即用戶名和密碼文本字段
<div class="form-group centered">
{{ form | crispy }}
<div id='form-errors'>{{ form_errors }}</div>
</div>
.login-form .centered {
text-align: center;
}
https://www.w3schools.com/CSS/css_align.asp

元芳怎么了
TA貢獻(xiàn)1798條經(jīng)驗 獲得超7個贊
我認(rèn)為您需要放入 form-inline 類,因為我看到您正在使用引導(dǎo)程序并且您需要添加此類。我添加一個例子。示例 w3schools
添加回答
舉報
0/150
提交
取消