行内元素出现换行的情况

例如这样：
html

<div id="box">
    <input type="text">
    <button>搜索</button>
</div>

css

#box{
     width:550px;
     height:40px;
     border:1px solid green;
}
#box input{
     width:500px;
     height:40px;
 }
 #box button{
     width:50px;
     height:40px;
 }

结果却是这样：

出现了换行的情况，这种问题是因为行内元素也是有间隙的，必须去除间隙才行，有一下几种解决办法：

一：
将行内元素写在一行里面

<div id="box">
    <input type="text"><button>搜索</button>
</div>

二：
给父元素样式增加一个属性

#box{
     width:550px;
     height:40px;
     border:1px solid green;
     font-size:0;
}

三：

使用letter-spacing(ie里面文字会被压缩)

#box{
     width:550px;
     height:40px;
     border:1px solid green;
     letter-spacing:-999px;
}

以上。。