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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM