猿问

搜索框和搜索按钮不平怎么办？改height,margin都没用？咋整？

html：
<html>
<body>
<div class="search"> <form method="get" action="#"> <input type="text" value="####" onfocus="if(this.value=='####')this.value='';" onblur="if(this.value=='')this.value='####';"></input> <input type="submit" value="搜 索"></input> </form> </div>
</body>
</html>
css：
.header .search input[type="text"]{ width:450px; height:35px; padding-left:8px; color:#999; border:2px solid #ffaa00;} .header .search input[type="submit"]{ width:90px; height:35px; background:#ffaa00; text-align:center; line-height:16px; color:#fff; font-family:微软雅黑; font-weight:700; font-size:16px; cursor:pointer; border:none; margin-left:-8px;}
效果：



沧海一幻觉
浏览 215回答 2
2回答

翻过高山走不出你

一般我们都会对css做一些初始化的设置，特别是块级元素padding margin值设为0；<!doctype&nbsp;html><html><head><meta&nbsp;charset="utf-8"><title>无标题文档</title></head><style&nbsp;type="text/css">input&nbsp;{&nbsp;margin:&nbsp;0;&nbsp;padding:&nbsp;0;}.search&nbsp;input[type="text"]&nbsp;{&nbsp;width:&nbsp;450px;&nbsp;height:&nbsp;35px;&nbsp;padding-left:&nbsp;8px;&nbsp;color:&nbsp;#999;&nbsp;border:&nbsp;0;&nbsp;outline:&nbsp;0;}.search&nbsp;input[type="submit"]&nbsp;{&nbsp;width:&nbsp;90px;&nbsp;height:&nbsp;39px;&nbsp;background:&nbsp;#ffaa00;&nbsp;text-align:&nbsp;center;&nbsp;line-height:&nbsp;16px;&nbsp;color:&nbsp;#fff;&nbsp;font-family:&nbsp;微软雅黑;&nbsp;font-weight:&nbsp;700;&nbsp;font-size:&nbsp;16px;&nbsp;cursor:&nbsp;pointer;&nbsp;border:&nbsp;none;&nbsp;margin-left:&nbsp;-8px;}.form-group&nbsp;{&nbsp;float:&nbsp;left;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;#ffaa00;}</style><body><div&nbsp;class="search">&nbsp;&nbsp;<form&nbsp;method="get"&nbsp;action="#">&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="form-group">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;value="####"&nbsp;onfocus="if(this.value=='####')this.value='';"&nbsp;onblur="if(this.value=='')this.value='####';">&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="submit"&nbsp;value="搜&nbsp;索">&nbsp;&nbsp;</form></div></body></html>
0

慕的地6264312

输入框跟搜索的高度并不一样。height是39但是，一个加上4像素的上下边框，一个没有。所以得在，submit修改，border:2px solid #ffaa00;另外垂直对齐的方式也得添加上，text和submit都添加vertical-align:middle;
0
随时随地看视频慕课网APP

相关分类

CSS3
Html5
我要回答