在之前做团委搜索页面的时候,曾经出现过一个小小的问题:搜索框与搜索按钮没对齐!今天读到一篇文章,写到了有关这个问题的探讨。
当使用:
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
的时候就会出现上面的没对齐情况!如下:
我当时是直接用margin-top来调整这种错位的。
在读到的那篇文章里,我看到一个更好的解决方案:
用<button>标签代替input="image",然后用CSS添加背景图片。
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
文章里说到如果输入文字过多IE6和IE7会水平滚动背景图片,所以背景图片要右对齐(
background: url(search_bg_ie.gif) no-repeat right bottom;
)!
最后给出文章的链接地址:http://www.qianduan.net/css-design-with-your-search-box.html