搜索框和搜索按钮不平怎么办？改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 html><html><head><meta charset="utf-8"><title>无标题文档</title></head><style type="text/css">input { margin: 0; padding: 0;}.search input[type="text"] { width: 450px; height: 35px; padding-left: 8px; color: #999; border: 0; outline: 0;}.search input[type="submit"] { width: 90px; height: 39px; 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;}.form-group { float: left; border: 2px solid #ffaa00;}</style><body><div class="search"> <form method="get" action="#"> <div class="form-group"> <input type="text" value="####" onfocus="if(this.value=='####')this.value='';" onblur="if(this.value=='')this.value='####';"> </div> <input type="submit" value="搜 索"> </form></div></body></html> -
慕的地6264312
输入框跟搜索的高度并不一样。height是39但是，一个加上4像素的上下边框，一个没有。所以得在，submit修改，border:2px solid #ffaa00;另外垂直对齐的方式也得添加上，text和submit都添加vertical-align:middle;
随时随地看视频慕课网APP
CSS3
Html5