Элемент ввода HTML дочерний

0

У меня есть три плавающих 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>?

  • 1
    действительно ли один должен быть ребенком другого? или они оба могут быть потомками элемента <div>
  • 6
    <input> не может иметь детей. Я предлагаю обернуть два элемента в элемент контейнера.
Показать ещё 5 комментариев
Теги:

1 ответ

1
Лучший ответ

Учитывая, что связанный текст является "меткой, которая просто указывает, что означает входное изображение", я бы предложил использовать элемент label и обернуть input внутри этого элемента:

<label>Guidance relating to input element:
    <input />
</label>

С помощью CSS:

label {
    width: 30%; /* or whatever... */
    float: left;
}

label input {
    display: block;
}

Репрезентативная демонстрация JS Fiddle.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню