qq_走成熟線_lz_0
2016-06-02 19:05:44
<!doctype html><html><head><meta charset="utf-8"><title>Busy - 電商</title><style>*{padding:0;margin:0;}? ? input{? ? ? ? background:none;? ? ? ? outline:none;? ? ? ? border:0px;? ? }? ? .search_box{? ? ? ? width:210px;? ? ? ? border:1px solid red;? ? }? ? .search_input{? ? ? ? height:30px;? ? ? ? padding:0 5px;? ? ? ? line-height:30px\9;? ? ? ? width:136px;? ? ? ? border:2px solid #FF8C00; display:inline-block;? ??? ? }? ? .search_btn{padding:0;? ? margin:0;? ? ? ? width:60px;? ? ? ? height:34px;? ? ? ? color:#FFF; ?display:inline-block;? ? ? ? background-color:#FF8C00;? ? }? ? /*? ? 任務:? ? 1 input需要清掉哪些默認樣式,和兼容問題如何解決?? ? 2 如何解決IE8一下的input框文字偏上問題? ? ?*/</style></head><body>? ? <div class="search_box">? ? ? ? <input type="text" class="search_input">? ? ? ? <input type="button" class="search_btn" value="搜索">? ? </div></body></html>
5 回答

ahao430
TA貢獻35條經驗 獲得超41個贊
inline-block,兩個input中間的換行符會占據一個空格。float脫離文檔流了所以沒有這個空格。
可以
??<input?type="text"?class="search_input"><input?type="button"?class="search_btn"?value="搜索">
或者
??<input?type="text"?class="search_input"><!-- ??--><input?type="button"?class="search_btn"?value="搜索">
消除空格。
也可以讓你的容器比兩個input寬度加起來大一點,讓他不換行。

object類型
TA貢獻3條經驗 獲得超0個贊
像div、h1、form、ol、ul、p等等都是block塊級元素
block(塊)元素的特點:
①總是在新行上開始;
②高度,行高以及外邊距和內邊距都可控制;
③寬度缺省是它的容器的100%,除非設定一個寬度。
④它可以容納內聯元素和其他塊元素
inline元素的特點:
①和其他元素都在一行上;
②高,行高及外邊距和內邊距不可改變;
③寬度就是它的文字或圖片的寬度,不可改變
④內聯元素只能容納文本或者其他內聯元素
inline-block即內聯塊級元素 ? 顧名思義inline-block同時具有塊級元素和內聯元素的特點 ? ?所以換行不正是塊級元素特點的體現嗎

剛毅87
TA貢獻345條經驗 獲得超309個贊
display:inline-block是吧元素變為行內快元素,同時具有行屬性 和塊屬性的特性,
設置為display:block,也可以使其換行
而浮動會使元素脫離文檔流,想換行 用浮動不可能實現.
望采納
- 5 回答
- 1 關注
- 5960 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消