让多个元素在一行显示的方法与技巧

最新推荐文章于 2024-07-08 15:55:54 发布

浩哥学习编程之路

最新推荐文章于 2024-07-08 15:55:54 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/110482479

css 专栏收录该内容

16 篇文章

订阅专栏

博客介绍了CSS中几种元素显示方式及浮动的使用。使用display:inline可将元素转为行内元素，但设置宽高属性无效；display:inline-block能让元素一行显示，不过受空格等影响有间距，给出了解决办法；还提到浮动float，使用时要清除浮动，且浮动中间无间隙，用了浮动display:inline-block会失效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.使用display:inline;

我们可以用display:inline把元素转换为行内元素但是转为行内元素了他的长度宽度就是它本身内容的长度宽度了设置属性不起作用

  <style>
        /* 方法一*/
        
        .box1,
        .box2 {
            display: inline;
            width: 200px;
            height: 2000px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

在这里插入图片描述

二.使用display:inlien-block
用display:inline-block;可以放元素在一行显示但是他会受空格/换行键的影响会有默认的间距
解决办法:

可以给加了display:inline-block 父元素添加font-size 但是默认的子元素里面内容会消失这时候在给子元素添加font-size把父元素的font-size覆盖即可
2.去掉空格和换行的影响但是这样或影响代码的可读性，不规范，不建议使用

    <style>
        /* 方法二 display: inline-block;*/
        
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            font-size: 0px;
        }
        
        .box1,
        .box2 {
            display: inline-block;
            width: 200px;
            height: 200px;
            font-size: 24px;
            text-align: center;
            background-color: pink;
        }
        
        .box2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

在这里插入图片描述

三.使用浮动float:left/right 但是记得清除浮动有个最简单的方法就是给父元素添加overflow:hidden
注意：

浮动float中间是没有间隙的
如果用了浮动display：inline-block就没有效果了

    <style>
        /* 方法二 浮动float*/
        
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            overflow: hidden;
            /* 清除浮动 */
        }
        
        .box1,
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: pink;
        }
        
        .box2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">盒子一</div>
        <div class="box2">盒子二</div>
    </div>
</body>

在这里插入图片描述