У меня есть три плавающих INPUTS, которые движутся в соответствии с шириной экрана, то есть они могут быть либо рядом друг с другом, либо друг над другом.
Для каждого элемента мне нужно поместить текстовое положение абсолютно в соответствии с элементом INPUT. Я знаю позицию: относительный (для элемента отца) и позицию: абсолютный для дочернего элемента (текст).
Моя проблема, и, вероятно, noobish. Как создать дочерний элемент для элемента <input>
(поскольку он не имеет закрывающего тега)?
Пример кода:
<input class="floating element" style="position:relative;">
<section class="text_for_floating_element" style="position:absolute; top:20px; left:20px;">
В приведенном выше примере элемент <section>
НЕ является дочерним элементом элемента <input>
, поэтому элемент <section>
будет располагаться в соответствии с ближайшим отцом, а не обязательным элементом. Как сделать элемент <section>
дочерним элементом элемента <input>
?
Учитывая, что связанный текст является "меткой, которая просто указывает, что означает входное изображение", я бы предложил использовать элемент label
и обернуть input
внутри этого элемента:
<label>Guidance relating to input element:
<input />
</label>
С помощью CSS:
label {
width: 30%; /* or whatever... */
float: left;
}
label input {
display: block;
}
<div>
<input>
не может иметь детей. Я предлагаю обернуть два элемента в элемент контейнера.