如何让两个div处于一行

最新推荐文章于 2024-02-29 16:47:09 发布

最新推荐文章于 2024-02-29 16:47:09 发布 · 511 阅读

文章标签：

#div不换行 #div处于一行 #inline-block #div行内 #行内样式

java web 同时被 2 个专栏收录

237 篇文章

订阅专栏

css

23 篇文章

订阅专栏

我们知道 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
</div>
</body>
</html>

浏览器效果:

那么如何让两个相邻的div在同一行呢?

有两种方式

方式一:使用float

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>让两个div处于同一行</title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
    div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
    div2
</div>
</body>
</html>

运行效果:

方式二:使用inline-block

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>让两个div处于同一行</title>
    <style>
        div{
            display: inline-block;
        }
    </style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
    div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
    div2
</div>
</body>
</html>

运行效果: