css 字体两端对齐

单行文本

方法一(支持IE11，IE10，IE9，Chrome，FireFox)：

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            font-size: 0px;
            /* height 和 overflow 一定得写，否则会有一行空白行*/
            height: 18px;
            overflow: hidden;
        }
        div{
            /* 为了使得标题和冒号在同一行，也可以用浮动使得在同一行或者用其他标签 */
            display: inline-block;
            width: 100px;
            font-size: 12px;
            line-height: 18px;
            text-align:justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
        }
        div:after{
            content: '';
            display: inline-block;
            width:100%;
        }
    </style>
</head>
<body>
    <!-- 如果想要对齐文字，也对齐冒号，最好将冒号单独拿出来，不然只有冒号对齐了最后一个文字是不会对齐的-->
    <!-- 在每个字中间打空格，不然火狐不支持 -->
    <!-- 注意，当设置两段对齐的元素的white-wrap为nowrap的时候对齐效果不生效 -->
    <section><div class="title">车 牌 号</div><div>：</div></section>
    <section><div class="title">行 驶 里 程</div><div>：</div></section>
    <section><div class="title">车 架 号</div><div>：</div></section>
</body>
</html>
posted @ 2020-09-01 23:07  胡姐姐  阅读(848)  评论(0)  编辑  收藏  举报