CSS------ 表單文本Title左中右對齊

經常我們會遇到類似上圖的表單填寫,前面的title有時候會需要居中、兩端對齊或者右對齊。特別是兩端對齊的情況,我最常用的方法是在文字之間加 這個空格符。

text-align-last 屬性

屬性規定如何對齊文本的最後一行。

注意:text-align-last 屬性只有在 text-align 屬性設置爲 "justify" 時才起作用。有兼容性問題,請根據情況選擇使用。

常見文本對齊示例:

.box{
            margin: 200px;
            overflow: hidden;
        }
        .box .item{
            margin-bottom: 8px;
            line-height: 32px;
            height: 32px;
        }
        .box .item .label{
            display: inline-block;
            min-width: 80px;
            height: 100%;
            margin-right: 5px;
            text-align: justify; /*必寫*/
            text-align-last: justify;/*這裏可以寫 left、right、center、justify、auto...*/
        }
<div class="box">
    <div class="item">
        <span class="label">手機號碼</span>:
        <span class="value">185********</span>
    </div>

    <div class="item">
        <span class="label">密碼</span>:
        <span class="value">******</span>
    </div>

    <div class="item">
        <span class="label">郵箱地址</span>:
        <span class="value">pi***@aliyun.com</span>
    </div>
</div>

想了解更多,參見https://www.runoob.com/cssref/css3-pr-text-align-last.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章