0

テキストボックスの横にある「keys_values」divの要素を取得するにはどうすればよいですか..つまり、div内のすべての要素がテキストボックスの横に表示されるはずです

<div id="edata" class="edata" >
    <input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
    <div class="keys_values" style="float:'left';">
        <span>
            <input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
            <input type="text" class="e_values" style="width:65px;" placeholder="value"/>
        </span>
    </div>
</div>
4

3 に答える 3

2

これを使用することをお勧めします：

<div id="edata" class="edata">
    <input type="text" class="users_percentage" placeholder="% of users" />
    <div class="keys_values">
        <span>
            <input type="text" class="e_keys" placeholder="key" />
            <input type="text" class="e_values" placeholder="value" />
        </span>
    </div>
</div>

CSS:

.users_percentage {
    width:65px;
    float:left;
    margin-right:4px;
}
.keys_values {
    float: left;
}
.e_keys, .e_values {
    width: 65px;
}

要素が既に持っているクラスを使用すると、ページのスタイルと構造を分離できます。

注:は他の のスタイルmargin-right: 4pxに合わせるためだけに追加されました。normalize.cssinputなどを使用している場合は、必要ないかもしれません。

ここで動作しています: http://jsfiddle.net/Fr3kD/1/

更新:span要素を相互に追加するには、次の HTML を使用します。

<div class="keys_values">
    <span>
        <input type="text" class="e_keys" placeholder="key" />
        <input type="text" class="e_values" placeholder="value" />
    </span>
    <span>
        <input type="text" class="e_keys" placeholder="key" />
        <input type="text" class="e_values" placeholder="value" />
    </span>
</div>

追加の CSS スタイルを追加します。

.keys_values span{
    display: block;
}

ここにデモがあります：http://jsfiddle.net/Fr3kD/3/

于 2013-09-18T12:32:38.150 に答える