html - 如何将元素更靠近 html 标签

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/