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仅添加以匹配其他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/

于 2013-09-18T12:32:38.150 回答
0 
<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>
于 2013-09-18T12:28:58.953 回答
0

尝试这个

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

演示

于 2013-09-18T12:31:33.937 回答