关于解决文本框和按钮对齐的方案

转载：http://www.jiaoben8.cn/Article-id137.html

对于一个网页设计师，浏览器兼容性是一个非常头疼的事情，尤其是对于新手来说，时常有砸电脑的冲动，呵呵，其实我们只是缺少点经验罢了...


解决文本框和按钮对齐,代码如下：


<div class="search"><input name="" type="text"  class="txt"/><input name="" type="submit" class="sub" value="搜 索"/></div>


首先用一个div包搜索框和按钮包起来，便于控制。


其次，给搜索框和按钮设置一个类，id都可以。
用css设置显示样式，基本流程就是这样，下面看重点。。。
css样式呈现：
.search {
    float: left;
    margin-left: 20px;
    margin-top:45px;
}
.search .sub {
    height: 36px;
    width: 88px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-image: url(image/pic.gif);
    background-repeat: no-repeat;
    background-position: left top;
    font-family: "宋体";
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    margin: 0px;
    display: block;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    cursor:pointer;
    outline:none;
}
.search .sub:hover{


    background-position: -176px top;
}
.search .txt {
    line-height: 36px;
    height: 36px;
    width: 510px;
    background-image: url(image/pic.gif);
    background-repeat: no-repeat;
    background-position: left -67px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin: 0px;
    display: block;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
}
简单说一下，提交按钮我们需要把边框设置为无，背景设置为您的预定好的图片，还有把显示样式设置为块：display: block;  左浮动：float: left;


文本框设置为：display: block;   左浮动：float: left;    宽度高度设置为您的预定图片大小。


预览效果：http://www.jiaoben8.cn/Specia-id138.html 兼容性很不错，您可以多个浏览器测试一下^_^