                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

關(guān)于浮動(dòng)和overflow的問(wèn)題

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>taobao</title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
}
body{
font:?12px/1.5?tahoma,arial,sans-serif;
}
a{
text-decoration:?none;
}
.search-tips{
float:?right;
padding:?3px?0?0?15px;
}
.search-tips?a{
color:?#6c6c6c;
}
.search-button{
float:?right;
}
.btn-search{
/*?background-image:?url(images/search.png);?*/
background-size:?100%?100%;
cursor:?pointer;
width:?50px;
height:?45px;
border:?0;
cursor:?pointer;
}

.search-common-panel{
height:?39px;
background-color:?#f50;
overflow:?hidden;
padding:?3px?0?3px?77px;

border:?10px?solid?blue;

}

.search-common-panel?input{
height:?39px;
line-height:?39px;
width:?100%;
border:?0?none;
outline:?0;
background-color:?green;
}


</style>
</head>
<body>
<div>
<div></div>
<div>
<form>
<!--?.................?-->
<div>
<a?href="#">
高級(jí)<br>搜索
</a>
</div>

<!--?.................?-->
<div>
<button?type="submit"></button>
</div>

<!--?.................?-->
<div>
<input?type="text">
<i></i>
</div>


</form>
</div>
</div>
</body>
</html>

首先我注釋掉overflow:hidden語(yǔ)句，然后在search-common-panel類(lèi)中添加了border樣式（藍(lán)色邊框），input（綠色）在search-common-panel類(lèi)中，那么input應(yīng)該在藍(lán)色邊框里，顯示結(jié)果并沒(méi)有在里面，為什么呢

????