使用HTML+；CSS

我想用CSS在输入元素上显示一个span元素。我怎样才能做到这一点。我当前的代码：

<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>

http://

我如何在输入元素上显示span元素，以便用户知道不需要输入http://这样看起来就好像输入元素上已经有值，但它就是span元素？我想我可以通过CSS定位来做到这一点

我不能使用占位符，因为我不想将其删除。

类似这样的内容：

*{
字体系列：Arial，无衬线；
字体大小：12px；
}
.行{
位置：相对位置；
}
.行跨度{
位置：绝对位置；
左：5px；
顶部：5px；
}
.行输入{
左侧填充：40px；
线高：16px；
}

http://

正如您所提到的，您需要使用定位，并使用span将您的输入包装到div或其他元素中

.wrapper{
位置：相对位置；
}
输入{
左侧填充：48px；
}
.包装跨度{
位置：绝对位置；
左：2px；
}

http://

这是一篇有点老掉牙的文章，但有一种更简单的方法可以做到这一点，而且不需要使用定位。将表单的每个元素包装在列表项中，并将显示设置为“inline block”，将跨度显示设置为“block”，如下所示-

li{
   display: inline-block;
}

li span{
   display: block;
}

然后需要交换html元素的顺序，如下所示-

<span>http://</span>
<input type="url" placeholder="e.g. www.google.com" />

http://

---

但是，如果希望跨度显示在输入元素的底部，则可以保持不变

您的小提琴没有显示输入上的跨距，而是显示在其一侧。更新了答案（将左边距更改为左边填充）这是可行的，但您可以判断输入的文本位于跨距顶部，反之亦然。它看起来并不是完美无缺的。你怎么能在一个输入上覆盖一个跨距，让每个字母都覆盖它下面的跨距，而没有那种奇怪的，字母对字母的外观呢？