css怎么让两个div在同一行显示-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

两个div在同一行显示的方法：1、给两个div元素设置“display:inline;”或“display:inline-block;”样式，让其转变为内联元素或行内块元素即可。2、给两个div元素设置“float:left;”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在HTML中，div元素是一个块状元素，每个块级元素都是独自占一行；因而多个div元素无法在一行显示。

那么怎么让两个div在同一行显示？下面给大家介绍一下。

方法1：使用display属性让其转变为内联元素或行内块元素

display属性用于定义建立布局时元素生成的显示框类型。

display:inline;：元素会被显示为内联元素，元素前后没有换行符。
display:inline-block;：元素会被显示为行内块元素，元素前后没有换行符。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 200px;
                border: 1px solid red;
                display: inline-block;
                /*display:inline;*/
            }
        </style>
    </head>
    <body>
        <div>div测试文本！</div>
        <div>div测试文本！</div>
    </body>
</html>

效果图：

【推荐教程：CSS视频教程】

方法2：使用float让Div并排显示

我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 200px;
                border: 1px solid red;
                float: left;
            }
        </style>
    </head>
    <body>
        <div>div测试文本！</div>
        <div>div测试文本！</div>
    </body>
</html>