width:300px
height:30px
background-image: url(../images/search.gif)/*这是这个搜索框的背景*/
background-repeat: no-repeat
background-position: 50%
margin-top: 10px
margin-right: 0px
margin-bottom: 0px
margin-left: 15px
padding: 0px
overflow: hidden
clear: both
}
.search input/*用来去掉搜索框里的文本框和按钮的背景和边框，并设置并列排放*/{
border:none
background:none
float:left
}
.search_box/文本框样式/{
width:150px
height:26px
line-height:26px
padding:0px
color:#999999
text-align:left
margin-top: 2px
margin-right: 15px
margin-bottom: 0px
margin-left: 10px
float: left
}
.search_button/*按钮样式*/{
width:45px
height:27px
cursor:pointer
color:#000000
font-size: 14px
}
具体样式可根据自己的需要调整。
希望对你有所帮助。
HTML代码<form action="" method="get">
<div id="search-box">
<input name="" type="text" class="input-box" />
<input name="" type="submit" value="搜索" class="button" />
</div>
</form>
CSS代码：
#search-box{width:326pxheight:29pxbackground:url(divcss5-so-bg.gif) no-repeat 0 0 margin:0 auto}.input-box{ float:left width:220px height:29px line-height:29px padding-left:11px border:0 background:none text-align:left font-size:14px}
.button{ float:right border:0 background:none text-indent:-999px width:70px height:29px cursor:pointer}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
.{ padding:0 margin:0 list-style:none}
.htmlBox{ width:100% min-width:500px height:500px border:1px solid #A349A4 border-radius:5px}
.sskBox{ width:100% height:35px margin-top:150px border:1px solid #000 border-left:0 border-right:0}
.zc{ width:100px height:35px float:left}
.zj{ width:250px height:35px float:left border-left:1px solid #000 border-right:1px solid #000}
.yc{ height:35px float:right}
</style>
</head>
<body>
<div class="htmlBox">
<div class="sskBox">
<div class="zc">左边100</div>
<div class="zj">中间250</div>
<div class="yc">右边自适应</div>
</div>
</div>
</body>
<script>
tmntH()//加载的时候执行一次
$(window).resize(function() {tmntH()})//浏览器窗口变化时执行
function tmntH()
{
var ycw=$(".sskBox").width()-352+'px'//yc的宽度等于sskBox宽度-350-2(边框线)
//alert(div3)
$(".yc").css("width",ycw)
}
</script>
</body>
</html>
