0

Googleのメイン検索ページの構造に似た、単純な検索ページを構築しようとしています。ブラウザーのズームを許容する方法で要素を配置するのに問題があります。ズームイン/アウトすると、検索用の入力フィールドが伸縮したように見え、Web ページのレイアウトが台無しになります。私の質問は、ズームインとズームアウト中に、以下のマークアップの要素の初期レイアウトを維持する方法を知っている人はいますか?

より具体的には、ズームイン/ズームアウトしている間、入力フィールドをその上のバナーとまったく同じ幅にしたいと思います。

Google のホームページで Ctrl + '+' および Ctrl + '-' を押してみてください。ズームインおよびズームアウトしている間、すべてがまったく同じように配置されていることに注意してください。それが私の例で達成しようとしていることです。

私のマークアップ:

<div style="width:1000px; border:2px solid grey;">
    <div style="margin:0px auto 0px auto; width:600px;">
        <img src="http://spiritsentient.com/wp-content/uploads/2009/12/foobar2000_banner1.jpg" style="width:600px; height:150px;">
    </div>
    <div style="width:800px; margin:0px auto 0px 200px;">
        <br/><input type="text" size="94">
        <select>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </select>
    </div>
    <div style="width:30px; margin:0px auto 0px auto;" >
        <input type="submit" value="search">
    </div>
</div>

jsfiddle:

http://jsfiddle.net/QbQS7/

4

1 に答える 1

0

主な問題は、コンテナ div に width="1000px" を使用することです。代わりに、width="100%" のように % を使用してみてください。または、少なくとも要素を中央に配置します。

次に、検索ボックスを含む div を左に 200 ピクセル配置し、それを % に変換してみるか、margin: 0px auto; を使用して単に中央に配置します。

最後に、テキスト入力と選択入力の幅を宣言して、特定のズーム サイズで重ならないようにします。通常、要素の親が幅を宣言している場合は、要素に幅を宣言することをお勧めします。

下記参照：

<div style="width:100%; border:2px solid grey;">
 <div style="margin:0px auto 0px auto; width:600px;">
     <img src="http://spiritsentient.com/wp-content/uploads/2009/12/foobar2000_banner1.jpg" style="width:600px; height:150px;">
 </div>     
 <div style="width:800px; margin:0px auto;">
     <input type="text" style="width: 600px" size="94">
     <select style="width: 150px;">             
      <option>Option1</option>             
      <option>Option2</option>             
      <option>Option3</option>         
     </select>     
  </div>     
  <div style="width:30px; margin:0px auto 0px auto;" >
     <input type="submit" value="search">     
  </div> 
 </div> ​
于 2012-06-20T14:09:26.610 に答える