<!DOCTYPE html>
<html>
<head>
<style>
#search{
margin: 0;
padding: 0;
width: 494px;
border: 3px solid #E4393C;
}
.text{
width: 406px;
border: none;
height: 20px;
padding: 5px;
}
.btn{
width: 78px;
border: none;
height: 30px;
padding: 0;
background: #E4393C;
}
</style>
</head>
<body>
<div id="search">
<form name="test">
<input type="text" class="text" value="搜索" />
<input type="button" class="btn" value="搜索" />
</form>
</div>
</body>
</html>
代码如上：
div#search 的宽度为 494px
input[type="text"]的宽度为 406px + 左右padding 10px = 416px
input[type="button"]的宽度为 78px
input[type="text"] + input[type="button"] 的宽度刚好等于 div#search 的494px
为什么会分两排显示呢？
我一像素一像素的增加 div#search的宽度，直到 502px 两元素才并排显示，求解这是什么情况？
各位大神，不要直接给我发什么资料啊，能先测试一下再问答吗？
因为两个input之间有空格……
对于html内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格，包括ie和ff，而这个空格是会被当作一个空白节点（nodeType等于3的节点，就是文字节点）。
input是个行内元素，你html代码有换行，就产生了一个空白符的宽度。
最容易的解决办法就是用浮动了。