Как поместить элемент ближе к HTML-метке

Question

Как поместить элемент ближе к HTML-метке

0

Мне нужно создать элемент (div или span) ближе к метке, созданной для поля ввода. Моя проблема заключается в том, что ширина метки, по-видимому, связана с шириной поля ввода, поэтому, если я добавлю div сразу после метки HTML, этот элемент будет создан в конце пространства, занимаемого полем ввода. Мой вопрос: как я могу перемещать элемент 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:

спасибо

Marco 24 март 2014, в 19:35

Источник

0

Я использовал float: left как на XX, так и на этикетке. Попробуйте это: jsfiddle.net/borglinm/zQ2Ep/1
Mathias 24 март 2014, в 18:09

Теги:

html

css

label

1 ответ

Ещё вопросы

Я использовал float: left как на XX, так и на этикетке. Попробуйте это: jsfiddle.net/borglinm/zQ2Ep/1

syymza · Accepted Answer · 2014-03-24T16-41-00.000Z

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/