div里嵌套div设置不换行的方法_vue div 禁止换行-CSDN博客

本文链接：https://blog.csdn.net/qq_40205281/article/details/104852710

一、Float:left;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置div不换行显示</title>
    <style>
        .one {
            float: left;
        }
        .two{
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">One</div>
    <div class="two">Two</div>
</body>
</html>

二、Display:inline-block;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置div不换行显示</title>
    <style>
     /*   .one {
            float: left;
        }
        .two{
            float: left;
        }*/
     .one{
         display: inline-block;
     }
     .two{
         display: inline-block;
     }
    </style>
</head>
<body>
    <div class="one">One</div>
    <div class="two">Two</div>
</body>
</html>

三、Display:flex;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置div不换行显示</title>
    <style>
     /*   .one {
            float: left;
        }
        .two{
            float: left;
        }*/
    /* .one{
         display: inline-block;
     }
     .two{
         display: inline-block;
     }*/
     .parent{
         display: flex;
     }
    </style>
</head>
<body>
    <div class="parent">
        <div class="one">One</div>
        <div class="two">Two</div>
    </div>
</body>
</html>