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

63 阅读 0 评论 42 点赞

我是靠谱客的博主丰富小丸子，最近开发中收集的这篇文章主要介绍span标签在设置display:inline-block后，文字想均匀排开，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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确实有了宽度。但是想让其中文字均匀排开，要加一个伪类。以前转载的别人的方法，上传纯属记录。