HTML input 子元素

Question

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

对于每个元素，我需要根据 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;
}

Representative JS Fiddle demo .