Question

我需要创建一个更接近为输入字段创建的标签的元素（div或span）。我的问题是标签宽度似乎与输入字段宽度有关，因此，如果我在HTML标签后立即添加div，则该元素将在输入框占用的空间的末尾创建。我的问题是：如何在不使用固定位置坐标的情况下将div元素更接近标签文本？

用我的代码获得类似的东西：

Example label         XX
========================
========================

我需要类似的东西：

Example label  XX
======================
======================

这是我目前的代码：

HTML：

<div style="float:left;">
    <div id="spinner" style="float: right; visibility: visible;">XX</div>
    <label for="text_sample">Example Text</label>
    <label>
    <input type="text" id="input_sample" name="xxxx" value="" style="width:180px" />    
    </label>
 </div>

CSS：

label{
    display: block;    
}

为方便起见，我创建了Fiddler demo：

谢谢

Answer 1

HTML：

<div style="float:left;">
    <label for="text_sample" class="left">Example Text</label>
    <div id="spinner" class="left">XX</div>
    <label>
        <input type="text" id="input_sample" name="xxxx" value="" />
    </label>
</div>

CSS：

label {
    display: block;
}
.left {
    float: left;
}
#input_sample {
    width:180px;
}
#spinner {
    margin-left:10px;
}

JSFiddle：http://jsfiddle.net/7fGLy/

如何使元素更接近html标签

1 个答案: