0

入力の中に入れたいフィールドとアイコンがあります<input />。<a><img /></a>

もちろんそんなタグじゃないからinputの中に画像を入れるわけにはいかないけど、重なるだけでいい。

私が使用するposition: relativeと（正しく配置するのが簡単になります）、アイコンはそれがあったはずの目に見えないスペースを占有し続けます。

使用する場合position: absolute、以前の兄弟に対してアイコンを配置できません。配置の値は親に関連しています。これは、ブラウザー<input>が異なると異なるサイズでレンダリングされるため、あまり良くありません。

これに対する回避策はありますか?

4

4 に答える 4

2

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

inputandをラッパーで包み、相対的に配置aされたラッパーから絶対に配置します。adiv

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 を使用し、input タグで画像の幅として padding-left を使用すると、隠れたスペースがなくなります。

于 2012-06-21T19:34:34.367 に答える
0

margin-left画像要素にネガを使用して、入力の上に表示させます。

于 2012-06-21T19:41:47.453 に答える