CSS元素宽度问题

<!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 两元素才并排显示，求解这是什么情况？

各位大神，不要直接给我发什么资料啊，能先测试一下再问答吗？

css

阅读 5.8k

3 个回答

得票最新