这段代码中的input为text的搜索框为何设置了宽度不起作用
.search-text{
border: 0;
float: left;
height: 25px;line-height: 25px;
outline: none;//
width: 350px;
}
设置了宽度，为何还是那么短
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: #333;
}
.bg_div{
background-image: url("river.jpg");
height: 690px;
width: 1268px;
margin: 0 auto;
position: relative;
}
.logo{
background-image: url("logo.png");
height:53px;
width:107px;
float: left;
margin: -5px 18px 0 0;
}
.search-form{
float: left;
background: #fff;
padding: 5px;
}
.search-text{
border: 0;
float: left;
height: 25px;line-height: 25px;
outline: none;//
width: 350px;
}
.search-submit{
border: 0;
background-image: url(search-button.png);
height: 29px;
width:29px;
float: left;
}
.box{
position: absolute;
top: 200px;
left: 400px;
}
.suggest{
width: 388px;
background: #fff;
border: 1px solid #999;
}
.suggest ul{
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li{
padding: 5px;
font-size: 12px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover{
background: #ccc;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<form action="https://cn.bing.con/search" target="_blank" id="search-form" >
<input type="text" name="q" id="search-input" autocomplete="off">
<input type="submit" value="">
</form>
</div>
</div>
<div id="search-suggest" style="display:none">
<ul>
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$("#search-input").bind('keyup',function(){
$("#search-suggest").show().css({
left:$('#search-form').offset().left,
top:$('#search-form').offset().top+$('#search-form').height(),
position:'absolute'
});
})
</script>
</body>
</html>
