<!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 关注
- 5871 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消