html - css 将 div 与文本框对齐

Question

如何获取文本框旁边的“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>

Answer 1

我建议使用这个:

<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 只是为了匹配其他 input 的样式。如果您使用 normalize.css或类似的，那么它可能没有必要。

它在这里工作: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/