0

我一直在尝试构建一个简单的搜索页面，类似于 google 主搜索页面的结构。我无法以容忍浏览器缩放的方式定位元素。在放大/缩小时，搜索的输入字段似乎会扩大和缩小，这会打乱网页的布局。所以我的问题是，有谁知道如何在放大和缩小时保持下面标记中元素的初始布局？

更具体地说，我希望输入字段的宽度与其上方的横幅完全相同，同时放大/缩小。

尝试在 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 向左对齐 200px，尝试将其转换为 % 或简单地使用 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 回答