我們知道 div是塊級元素,是獨占一行的.一般情況下,兩個相鄰的div是不會處于一行的
例如:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>讓兩個div處于同一行</title>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
div2
</body>
</html>
浏覽器效果:
那麼如何讓兩個相鄰的div在同一行呢?
有兩種方式
方式一:使用float
<style>
div{
float: left;
}
</style>
運作效果:
方式二:使用inline-block
display: inline-block;
注意:
(1)為什麼要使用display: inline-block;而不是display: inline;,因為display: inline導緻元素的height和width樣式失效.
(2)這兩種方式的顯示效果并不是完全一樣的,為什呢?
方式二中兩個div中會有大小為8px的margin,這是從哪裡來的呢?是從body繼承過來的.