1

各フォーム要素の上に表示するフォームラベルを取得しようとしています。私はこれが行われるjsfiddleを持っています。

問題は、ラベルを真上に保ちながら、1行に複数のフォーム要素を取得するにはどうすればよいですか？

私の例では、「city、state、zip」がすべて同じ行にあることがわかりますがdisplay: block、CSSのせいで、それらが別々の行に分割されています。

label { 
    font-weight:bold;
    display: block;
}

<form>

    <label for="name">Name</label>
    <input type="text" name="name" /><br />

    <label for="email">Email</label>
    <input type="text" name="email" /><br />

    <label for="city">City</label>
    <input type="text" name="city" /> 

    <label for="state">State</label>
    <input type="text" name="state" /> 

    <label for="zip">Zip</label>
    <input type="text" name="zip" /><br />

    <label for="last">Last</label>
    <input type="text" name="last" />

</form>
4

3 に答える 3

3

ラベル/フィールドのペアをマークアップするセマンティックな方法は、DLlistを使用することです。

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>

        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

このコードを使用すると、必要なプレゼンテーションも簡単に実現できます。

複数のラベル/フィールドのペアを水平に配置する必要がある場合は、 /ペアDLごとに別々に使用します。DTDD

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>
    </dl>
    <dl>
        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

およびを使用するfloat: left、またはdisplay: inline-block（ニーズに最適なものに応じて）display: table-cell：DL

/* Font size zeroed for removing gaps between inline blocks. */
FORM {font-size: 0; }

/* Font size restored for DL. */
FORM DL {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    /*width: 200px;*/ /* Specify width if needed. */
}

ところで、要素の属性は、その属性ではなく、ラベル付けされた要素の属性をfor参照LABELしていることを考慮に入れてください。idname

于 2012-11-11T11:50:01.290 に答える
1

cssクラスを書いてください：

.inline-block-display{
display: inline-block !important;
}

次に、次のように、同じ行に追加する各要素にこのクラスを追加します。

<input type="text" name="city" class="inline-block-display" />

デモ

于 2012-11-11T11:46:27.787 に答える
0

使用したいのはcssの「float」と「clear」です

このjsfiddleを見て、あなたは理解するでしょう（あなたのフィドルを拡張しました）あなたは明らかにあなたのニーズに合うように幅を編集することができます

http://jsfiddle.net/UxPDR/

このような

.small{
    float:left;
}
.clearleft{
    clear:left;
}
于 2012-11-11T11:44:22.087 に答える