span标签在设置display:inline-block后，文字想均匀排开

両面

于 2023-01-07 21:32:06 发布

阅读量717

点赞数 3

分类专栏： js自主学习文章标签： css html css3

本文链接：https://blog.csdn.net/m0_45873583/article/details/128595695

版权

js自主学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了一段HTML代码，其中使用CSS的`display:inline-block`和伪类`::after`来实现列表项内文字的均匀排列。内容涉及HTML标签（如`<ul>`和`<li>`）、CSS属性（如`font-size`和`text-align`），以及艺术家张玉瀛的一幅超现实主义油画作品‘宝贝儿’的相关信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .arter1 li {
            font-size: 14px;
            line-height: 24px;
            color: #4a4a4a;
        }

        .arter1 span {
            height: 24px;
            width: 65px;
            text-align: justify;
            display: inline-block;
            vertical-align: top;
        }

        .arter1 span:after {
            content: "";
            display: inline-block;
            width: 100%;
            height: 0px;
        }
    </style>
</head>

<body>
    <ul class="arter1">
        <li><span>作品名称</span>： 宝贝儿</li>
        <li><span>作品类型</span>： 油画</li>
        <li><span>艺术家</span>： 张玉瀛</li>
        <li><span>风格</span>： 超现实</li>
        <li><span>材质</span>： 布面油画</li>
        <li><span>题材</span>： 人物</li>
        <li><span>创作时间</span>： 2011</li>
        <li><span>所在位置</span>： 华东</li>
        <li><span>尺寸</span>： 78x78cm</li>
    </ul>
</body>

</html>

在span设置display:inline-block后，span确实有了宽度。但是想让其中文字均匀排开，要加一个伪类。以前转载的别人的方法，上传纯属记录。