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/

Answer 2

<div id="edata" class="edata" >
  <div style="float:left; width:49%">
    <input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
  </div>
  <div class="keys_values" style="float:left; width:49%">
    <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 3

试试这个

   <div class="keys_values" style="float:'left';margin:-26px 0 0 70px">

DEMO

css将div与文本框对齐

3 个答案: