CSS 让div,span等块级、非快级元素排列在同一行
让div,span等块级、非快级元素排列在同一行
by:授客 QQ：1033553122
例子：让两个div排列在同一行
给div添加float样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
div{
float: left;
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: red" >
div1
</div>
<div style="height: 40px;width: 70px;background-color:grey" >
div2
</div>
</body>
</html>
说明：让div和span排列在一起也可以用上述上方法
例子：让div和两个span排列在同一行
额外要求，然第二个span排列在最右侧
使用display-inline（为什么要使用display: inline-block;而不是display: inline; 是因为display: inline导致元素的height和width样式失效）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
div,span{
display: inline-block;
}
.span2 {
float:right
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: red" >
div1
</div>
<span style="height: 40px;width: 70px;background-color:blue">
span1
</span>
<span class="span2" style="height: 40px;width: 70px;background-color:grey">
span2
</span>
</body>
</html>
运行结果
说明：第一个div和第一个span之间存在空白间隙，那是因为div元素和span元素之间存在换行等空白，去除即可，如下
<div style="height: 40px;width: 80px;background-color: red" >
div1
</div><span style="height: 40px;width: 70px;background-color:blue">
span1
</span>