css如何实现文字两端对齐要实现的效果实现重点： text-align: justify; display: inli

要实现的效果

实现重点：

text-align: justify; display: inline-block; overflow: hidden;并增加为元素

<!DOCTYPE html>
 <html>
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .arter1 span {
                    height: 24px;
                    line-height: 24px;
                    width: 65px;
                    text-align: justify;
                    display: inline-block;
                    overflow: hidden;
                    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>