讓div,span等塊級、非快級元素排列在同一行 by:授客 QQ：1033553122 例子：讓兩個div排列在同一行 給div添加float樣式 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> div{ ...
讓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>
