css实现文字两端对齐

作者: zlchen | 来源:发表于2022-04-04 01:01 被阅读0次

记录css实现文字两端对齐（兼容所有浏览器）
04-CSS总结-持续更新中
css 实现文字两端对齐
css实现文字两端对齐
css实现文字两端对齐
css实现文字两端对齐
css 文字多行对齐
CSS文字两端对齐
css文字两端对齐
宽度与高度

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li span{
                font-weight:600;
            }
            
            .arter li {
                font-size: 14px;
                line-height: 24px;
                color: #4a4a4a;
                list-style:none;
            }
            
            .arter span {
                height: 24px;
                line-height: 24px;
                width: 65px;
                text-align: justify;
                display: inline-block;
                overflow: hidden;
                vertical-align: top;
            }
            
            .arter i {
                display: inline-block;
                width: 100%;
                height: 0;
            }
            
            
            
            
            .arter1 li {
                font-size: 14px;
                line-height: 24px;
                color: #4a4a4a;
                list-style:none;
            }
            .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="arter">
            <li><span>作品名称<i></i></span>： 宝贝儿</li>
            <li><span>作品类型<i></i></span>： 油画</li>
            <li><span>艺术家<i></i></span>： 张玉瀛</li>
            <li><span>风格<i></i></span>： 超现实</li>
            <li><span>材质<i></i></span>： 布面油画</li>
            <li><span>题材<i></i></span>： 人物</li>
            <li><span>创作时间<i></i></span>： 2011</li>
            <li><span>所在位置<i></i></span>： 华东</li>
            <li><span>尺寸<i></i></span>： 78x78cm</li>
        </ul>
        <br /><br />
        <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>