Question

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

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

我的问题，可能是一个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>元素的子元素？

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

HTML输入元素子

1 个答案: