0

我有一个<input />字段和一个<a><img /></a>图标，我想将它们放在输入中。

当然，我不能将图像放在输入中，因为它不是那种标签，但我会很高兴它只是重叠。

如果我使用position: relative（这使得正确定位它变得容易），该图标将继续占据原本所在的不可见空间。

如果我使用position: absolute我不能相对于它的前一个兄弟定位图标，定位值是相对于父级的，这不是很好，因为不同的浏览器呈现<input>不同的大小。

有解决方法吗？

4

4 回答 4

2

http://jsfiddle.net/iambriansreed/u7DUv/

input将和包裹a在包装纸中，并将其绝对定位a在相对定位的div包装纸上。

CSS

input {
    font-size: 24px;
    width: 200px;
}
div { 
    position: relative;
    width: 200px;
}
div a {
    display: block;
    position: absolute;
    top: 4px;
    right: 0;
    z-index:99;
}
于 2012-06-21T19:33:27.847 回答
0

我想我现在知道该怎么做了。我<span>在我的图标所在的位置做了一个，它将position:relative没有偏移，并且它将包含带有position:absolute. 这样，跨度的绝对偏移量实际上就是页面的相对偏移量。

于 2012-06-21T19:29:06.930 回答
0

使用 position:relative，并使用 padding-left 作为输入标签中图像的宽度，不会有隐藏空间。

于 2012-06-21T19:34:34.367 回答
0

只需在图像元素上使用负片margin-left，让它显示在输入上方。

于 2012-06-21T19:41:47.453 回答