CSS帮助。输入字段旁边会显示验证消息

Question

我在该字段下有验证消息，但我希望它在同一行。 （请不要判断我的前端技能，特别是css和html =））

现在

我想要什么

CSS

@CHARSET "UTF-8";

#reg-form {
    display: block;
    width: 600px;
}

#reg-form li {
    width: 250px;
    display: block;
    padding: 5px 5px;
}

    #reg-form li label {
        width: 150px;
        float: left;
    }

.status {
    font-size: 14px;
    color: red;

}

#register-user {
    float: left;
    margin-left: 7px;
    padding: 5px 5px 5px 5px;
}

HTML

{% block main-menu %} 
    <div class="contentarea">
            <form method="post" action="">{% csrf_token %}
                <ul id="reg-form">
                    <li>
                        <label for="id_username">Username:</label>
                        <input id="id_username" type="text" name="username" maxlength="30" />
                    </li>
                    <div class="status"></div>
                    <li>
                        <label for="id_email">Email:</label>
                        <input type="text" name="email" id="id_email" />
                    </li>
                    <div class="status"></div>
                    <li>
                        <label for="id_password">Password:</label>
                        <input type="password" name="password" id="id_password" />
                    </li>
                    <div class="status"></div>
                    <li>
                        <label for="id_password2">Password (Again):</label>
                        <input type="password" name="password2" id="id_password2" />
                    </li>
                    <div class="status"></div>
                </ul>
                <input type="button" value="register" id="register-user"/>
            </form>
    </div>

{% endblock %}

Answer 1

你不应该将<div>放在<ul>内 - 这是错误的语法。 （Javascript错误带有错误的语法。）提示：使用W3 validator检查源代码。

尝试使用<span> - 这是一个内联元素 - 而不是<div>（但将跨度放在相应的<li>内）。

例如： http://jsfiddle.net/Q7R4k/3/

Answer 2

您的<li>对display: block;有display: inline。尝试将其更改为display: inline-block或.status和#reg-form li上的li或li。见http://jsfiddle.net/Q7R4k/。默认情况下，内联元素将向右堆叠，而块占据整个水平线。

但是，您需要在display:block;之间设置换行符，以便在单独的行中获取display:inline-block;。请参阅http://jsfiddle.net/Q7R4k/1/。

修改 有关输入后直接使用div的版本，请参阅http://jsfiddle.net/Q7R4k/2/。此处，标签为.status，输入display:inline;（内联也可用）和ul {{1}}。此外，取出{{1}}的宽度。