1

フィールドの下に検証メッセージがありますが、同じ行に配置したいと思います。（私のフロントエンドスキル、特に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 %}
4

2 に答える 2

3

<div>-の中にsを入れてはいけません<ul>-それは悪い構文です。（Javascriptエラーには構文が正しくありません。）ヒント：W3バリデーターを使用してソースコードを確認してください。

<span>代わりに（インライン要素である）を使用してみてください<div>（ただし、スパンは対応する<li>s内に配置してください）。

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

于 2012-08-23T00:09:01.083 に答える
1

あなた<li>はそれらを持っdisplay: block;ています。に変更してみてdisplay: inlineください。http://jsfiddle.net/Q7R4k/を参照してください。インライン要素はデフォルトで右側にスタックしますが、ブロックは水平線全体を占めます。display: inline-block.status#reg-form li

liただし、をli別々の行に配置するには、の間に改行を入れる必要があります。http://jsfiddle.net/Q7R4k/1/を参照してください。

編集：入力の直後にdivがあるバージョンについては、 http： //jsfiddle.net/Q7R4k/2/を 参照してください。ここでは、ラベルdisplay:block;、入力display:inline-block;（インラインでも機能します）、およびが与えられ.status display:inline;ます。また、の幅をul取り出しています。

于 2012-08-23T00:01:01.680 に答える