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;}效果：
2 回答
翻过高山走不出你
TA贡献1875条经验 获得超3个赞
一般我们都会对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
TA贡献1817条经验 获得超6个赞
输入框跟搜索的高度并不一样。
height是39但是，一个加上4像素的上下边框，一个没有。
所以得在，submit修改，border:2px solid #ffaa00;
另外垂直对齐的方式也得添加上，text和submit都添加vertical-align:middle;
- 2 回答
- 0 关注
- 174 浏览
添加回答
举报
0/150
提交
取消