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 關注
- 221 瀏覽
添加回答
舉報
0/150
提交
取消