input总是和button不能对齐

之前写搜索框时没注意这个问题，按正常而定写法input框和button边框总是不能对齐，可以在控制台通过实验button的marign-top来调节，但是还是不太好的

这里的总会出现错位；

解决1：

在input和button外层都加一层span，使两个span对齐，处理input边框就行了，

代码：

html：

  <div class="search">
        <span class="span1">
            <input type="text">
        </span>
        <span class="span2">
            <button>百度一下</button>
        </span>
    </div>

css：

      .search{
            width: 700px;
            height:38px;
            position: absolute;
            left: 50%;
            margin-left:-350px;
        }
        span{
            float: left;
            height: 40px;
        }
        .span1{
            box-sizing: border-box;
            width: 500px;
            border: 1px solid #ccc;
        }
        input{
            position: absolute;
            border: 0 none;
            width: 400px;
            height: 30px;
            padding: 0px;
            outline: none;
            font-size: 16px;
        }
        button{
            height: 40px;
            width: 100px;
             border: 1px solid blue;
            font-size: 15px;
            background:blue;
            color:#fff;
        }

解决2：

html：

<div class="content">
        <input type="text"><button>百度一下</button>
    </div>

css：

使用

在input中使用box-sizing: border-box；和 vertical-align: top;

        input{
            box-sizing: border-box;
            width: 500px;
            height: 40px;
            vertical-align: top;
        }
        button{        
            width: 100px;
            height: 40px;
            border: 1px solid blue;
            font-size: 16px;
            color:#fff;
            background:blue;   
        }

最终都会呈现对齐的