HTML 输入元素子元素

Question

我有一个三个浮动输入，它们根据屏幕宽度移动，这意味着它们可以并排或彼此重叠。

对于每个元素，我需要绝对根据 INPUT 元素放置文本位置。我知道position:relative（对于父元素）和position:absolute对于子元素（文本）。

我的问题，而且可能是一个新手问题。如何为元素创建子元素<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>元素？

Answer 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 演示。