1

私は現在、次のフィドルのように設定されたフォームを持っています：http: //jsfiddle.net/8bbaF/2/

各入力ボックスの間に一定量の空白を入れようとしています。現在、フォーマットは各ラベルの長さに基づいています。書式はラベルの長さに依存しないようにしたいと思います。ラベルは現在入力ボックスの上にあり、そこにとどまる必要があります。どんな助けでも大歓迎です。

<div class="inputForm">
<form id="newInput">

    <div class="inputFields">
        <label for="lists">Lists<input name="lists"/></label>
        <label for="new1">New Field 1<input name="new1"/></label>

    </div>
    <div class="inputFields">
        <label for="lists">Listswqwerqwer<input name="lists"/></label>
        <label for="new1">New Field 1<input name="new1"/></label>

    </div>

</form>

CSS：

.inputForm label{
    display:inline-block;
}
div.inputFields{
    display:inline-block;
}
.inputFields input{
    padding-right:3%;
}
4

3 に答える 3

2

ラベル内に入力フィールドを配置しないでください。多くの問題を引き起こしています。これをチェックしてください：http://jsfiddle.net/8bbaF/6/

<div class="inputForm">
<form id="newInput">

    <div class="inputFields">
        <label for="lists">Lists</label><input name="lists"/>
        <label for="new1">New Field 1</label><input name="new1"/>

    </div>
    <div class="inputFields">
        <label for="lists">Lists</label><input name="lists"/>
        <label for="new1">New Field 1</label><input name="new1"/>

    </div>

</form>

于 2013-03-14T21:24:52.100 に答える
1

各inputFieldsコンテナにマージンを設定し、CSS を少し調整します。

CSS

.inputFields {
    display: inline-block;
    margin-right: 15px;
}

.inputFields label,
.inputFields input {
    display: block;
}

デモ

于 2013-03-14T21:21:00.023 に答える
1

これを行う1つの方法は次のとおりです。

<div class="inputForm">
    <form id="newInput">
        <div class="inputFields">
            <label for="lists">Lists</label>
            <input name="lists" />
        </div>
        <div class="inputFields">
            <label for="new1">New Field 1</label>
            <input name="new1" />
        </div>
        <div class="inputFields">
            <label for="lists">Listswqwerqwer</label>
            <input name="lists" />
        </div>
        <div class="inputFields">
            <label for="new1">New Field 1</label>
            <input name="new1" />
        </div>
    </form>
</div>

CSSで

div.inputFields {
    display: inline-block;
    margin-right: 20px;
    width: 40%;
    margin: 10px;
    border: 1px solid gray;
}

.inputForm label {
    display: block;
}
.inputFields input {
    display: block;
    width: 90%;
}

そしてフィドル: http://jsfiddle.net/audetwebdesign/pg8Kh/

本質的に同じ考えで最初にここにたどり着いた他の人もいます。レイアウト グリッドにフィールドを配置する方法に応じて、いくつかのバリエーションがあります。

ただし、重要なのは<label>、 を別の要素として保持することです。

于 2013-03-14T21:35:11.543 に答える