html - 只有四个元素的简单搜索页面,试图在调整大小时保持布局

标签 html css

我一直在尝试构建一个简单的搜索页面,类似于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/

最佳答案

主要问题是容器 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/

相关文章:

java - 在 Flying Saucer 中使用符号

html - 椭圆背景渐变

javascript - FooTable 的分页 : a jQuery Plugin for Responsive Data Tables

html - float 两个 div 元素而不影响下一个 div 元素

html - 如何在CSS中为图像添加内阴影

javascript - 即使在禁用提交按钮后,表单也会被提交两次

javascript - 更改 Kendo 标签条文本会动态改变样式

javascript - 如何使用 Gulp 连接 CSS 文件?

css - 文本框的水平滚动条

html - 向右浮动不起作用