如何水平对齐登录表单的内容

Question

我制作了一个登录表单，其中的内容垂直对齐。我应该怎么做才能像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文本字段或块垂直对齐的，但我想他们在顶部水平对齐，而不是垂直。我该怎么做？先感谢您！

Answer 1

我应该怎么做才能像facebook登录页面一样水平排列？.login-form {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }内容，即用户名和密码文本字段<div class="form-group centered">&nbsp;&nbsp;&nbsp; &nbsp; {{ form | crispy }}&nbsp; &nbsp; &nbsp;<div id='form-errors'>{{ form_errors }}</div></div>.login-form .centered {&nbsp; text-align: center;}https://www.w3schools.com/CSS/css_align.asp

Answer 2

我认为您需要放入 form-inline 类，因为我看到您正在使用引导程序并且您需要添加此类。我添加一个例子。示例 w3schools