为什么用display:inline-block;换行了？？；而用float：right就不换行
<!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>
qq_走成熟线_lz_05回答
-
ahao430
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宽度加起来大一点，让他不换行。 -
慕后端6892864
注意你的宽度默认100%宽了 -
object类型
float属性脱离标准文档流 不会产生换行的效果 -
object类型
像div、h1、form、ol、ul、p等等都是block块级元素block（块）元素的特点：①总是在新行上开始；②高度，行高以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除非设定一个宽度。④它可以容纳内联元素和其他块元素inline元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变④内联元素只能容纳文本或者其他内联元素inline-block即内联块级元素 顾名思义inline-block同时具有块级元素和内联元素的特点 所以换行不正是块级元素特点的体现吗 -
刚毅87
display:inline-block是吧元素变为行内快元素,同时具有行属性 和块属性的特性,设置为display:block,也可以使其换行而浮动会使元素脱离文档流,想换行 用浮动不可能实现.望采纳
随时随地看视频慕课网APP
Html/CSS
Html5