ブラウザのページ上で画像が移動するアンカータグのサイズが変更されました

Question

検索テキストボックスにボタンの代わりに拡大鏡の画像が必要な場合は、検索アプリケーションを開発しています。

最大ページでは、アンカーが正しい場所にあるようです。

しかし、ブラウザのサイズ変更（ボタンを閉じ、次のボタンを押した復元]をクリック）で、検索テキストボックスには、次のようになります。後

は私のCSSコードです（私はありませんCSSの男btw :)

.search_div A 
{ 
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF; 
border: 1px solid #CCCCCC; 
height: 11px; 
left: 85.8%; 
margin-right: 175px; 
padding: 6px 5px 4px 20px; 
position: fixed; 
top: 32px; 
width: 0; 
} 

お勧めします。

Answer 1

検索ボタン/入力の完全なマークアップは表示されないので、検索ボタンの配置方法を正確に把握することは困難です。

ここで私はそれをやります。あなたがfollowinマークアップがあるとしましょう：、検索ボタンの

.search_div { 
    position: relative; 
    border: 1px solid LightGrey; 
    width: 300px; 
} 

left値ゼロを持つことは絶対にする：ラッピングDIVの場合

<div class="search_div"> 
    <a href="#">Search</a> 
    <input type="text" /> 
</div>​ 

を、キーが明示的に相対して配置することです左に貼り付ける。

.search_div A { 
    background: url(icon.gif) no-repeat scroll center center #FFFFFF; 
    border: 1px solid #CCCCCC; 
    width: 16px; 
    height: 16px; 
    left: 0; 
    position: absolute; 
    text-indent: -99999px; 
} 

アンカーが絶対配置されているので、入力は下になります。 トリックパッドにアンカー幅よりも少し高い値への入力の左側なので、テキストの先頭には、アンカーの下に隠されていない。

.search_div input { 
    box-sizing: border-box; 
    border: 0; 
    outline: 0; 
    line-height: 16px; 
    width: 100%; 
    padding-left: 20px; 
    padding-right: 3px; 
} 

DEMO

---

さらに、この手法では、コンテナに追加クラスを適用することで、検索アイコンが左側または右側に表示される可能性があります。

は、スティックを左または右に検索アイコン：

.search_div.iconleft a { 
    left: 0; 
    right: auto; 
} 

.search_div.iconright a { 
    left: auto; 
    right: 0; 
} 

も左または右入力のパディングを調整します。

.search_div.iconleft input { 
    padding-left: 20px; 
    padding-right: 3px; 
} 

.search_div.iconright input { 
    padding-right: 20px; 
    padding-left: 3px; 
} 

DEMO

Answer 2

行番号position:fixed;は、ブラウザウィンドウに対して要素を固定するため、ブラウザがサイズ変更されたときに要素シフトが表示されるため、問題が発生している可能性があります。

position: relative;は、アンカー要素とその親要素.search_divの両方に対して、aのアンカー要素を相対にしたい場合に適用します。アンカーがその要素を含む位置に配置されると、css属性 "left、right、top、およびbottom"を使用して、必要に応じて配置できます。