html - 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>s 放在 a <ul>-- 这是不好的语法。（Javascript 错误伴随着语法错误。）提示：使用W3 验证器检查您的源代码。

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

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

Answer 2

你<li>的 sdisplay: block;在他们身上。尝试将其更改为display: inline或display: inline-block和。请参阅http://jsfiddle.net/Q7R4k/。默认情况下，内联元素将堆叠在右侧，而块则占据整条水平线。.status#reg-form li

但是，您需要在 s 之间有换行符li，以便将lis 放在单独的行上。请参阅http://jsfiddle.net/Q7R4k/1/。

编辑： 请参阅http://jsfiddle.net/Q7R4k/2/以获取在输入之后直接带有 div 的版本。在这里，给出了标签display:block;，输入display:inline-block;（内联也可以）和.status display:inline;。ul此外，还取出了宽度。