行内元素出现换行的情况

例如这样：
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;}

以上。。