网站首页 > 知识剖析正文

「CSS」将多个div元素并列为一行的方法

nixiaole 2025-01-12 17:36:26 知识剖析 15 ℃

一、前言

CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。

有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？

二、需求

想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
    <div class="position-name">京东</div>
    <div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>

三、解决

加上 display: inline-block，使之为内联元素，而非块元素即可，修改后的代码如下，修改后的效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position {
            /* 融合为块元素 */
            display: inline-block;
            margin-left: 8px;
        }

        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
    <div class="position-name">京东</div>
    <div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>

四、小结

利用好 CSS 提供的 display: inline-block 属性即可。

上一篇： Vue框架学习记录4
下一篇：一文解读JavaScript中的文档对象(DOM)

网站首页 > 知识剖析 正文