问题描述:
修改css的时候本来是想要将1一个input和一个button放到一行上,但是修改完成之后的效果是input在第一行,button在第二行
问题分析:
css写的有问题
.int-button-auto{ background: url("../images/btn-open.gif") no-repeat scroll center center transparent; display: block; height: 20px; width: 20px; }
上网查了下
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
要特别注意的是block在元素前后会带有换行符
解决方式:
最后吧display属性去掉了,看来平时写的时候太随意,很多细节都没有注意到
备注:
如何将2个div放到同一行:
使用2个float:left
<body> <div style="position:relative;width: 100px;background-color: blue;">1 <div style="width: 40px;float: left;background-color: green;"> 2 </div> <div style="width: 40px;float: left;background-color: orange;"> 3 </div> </div> </body>
特别需要注意的是,如果2个div的总长度超过了外边div的长度,div3将会被挤到div2下边:
<body> <div style="position:relative;width: 100px;background-color: blue;">1 <div style="width: 40px;float: left;background-color: green;"> 2 </div> <div style="width: 80px;float: left;background-color: orange;"> 3 </div> </div> </body>