html - 将标签放置在输入的顶部

Question

我遇到了这个问题，我需要在输入元素的顶部放置一个 Label。下图使用背景图像来实现这一点，但我想用标签来实现。或者可能是一个跨度!我尝试使用可能包含 CSS3 样式教程的 google 链接，但一无所获。都是用图片来放置图标。我想在其中放置一个带有文本的跨度/标签。

如上图如何按照图标的放置方式放置跨度或标签。任何想法。

Answer 1

你的意思是这样的吗？

Demo

<div>
    <label for="test">L</label>
    <input type="text" id="test" />
</div>

div {
    position: relative;
}

label {
    position: absolute;
    left: 5px;
}

input[type=text] {
    padding-left: 15px;
}