html - 在输入顶部放置标签

Question

我遇到了这个问题，我需要在输入元素的顶部放置一个标签。下图使用背景图像来解决问题，但我想用标签来做。或者可能是一个跨度！我尝试使用 CSS3 样式教程的可能谷歌链接，但一无所获。他们都在使用图像来放置图标。我想在其中放置一个带有文本的跨度/标签。

如上图所示，如何以图标的定位方式放置跨度或标签。有任何想法吗。

Answer 1

你的意思是这样的吗？

演示

<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;
}