我一直在尝试构建一个简单的搜索页面,类似于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:
最佳答案
主要问题是容器 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>
关于html - 只有四个元素的简单搜索页面,试图在调整大小时保持布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11121199/