中文詞語字數不同時兩端(等寬)對齊的方法小結

木子爍束岸發表於2019-01-07

中文詞語字數不同時兩端(等寬)對齊的方法小結


菜雞歸納學習個CSS基礎小案例，順便練習寫文字。


很多時候我們會遇到需要將文字兩端對齊的情況，可能是這樣：

中文詞語字數不同時兩端(等寬)對齊的方法小結

也可能是這樣：

中文詞語字數不同時兩端(等寬)對齊的方法小結


遇到這類情況，我們很可能為了整齊美觀，需要將這些字數不同的詞語等寬對齊。為了，我總結歸納了集中方法給大家參考。

效果如下

中文詞語字數不同時兩端(等寬)對齊的方法小結

1、無腦的在文字中間插入轉義字元來擠出空白間距

<ul>    
    <li>姓&emsp;&emsp;名：<input type="text"></li>
    <li>畢業院校：<input type="text"></li>
    <li>工作單位：<input type="text"></li>
    <li>所&ensp;在&ensp;地：<input type="text"></li>
</ul>複製程式碼
空格的轉義字元分為如下幾種：
  • &nbsp;&160#;不斷行的空白（1個字元寬度）
  • &ensp;&8194#;半個空白（1個字元寬度）
  • &emsp;&8195#;一個空白（2個字元寬度）
  • &thinsp;&8201#;窄空白（小於1個字元寬度）
平時一般用的是&nbsp; 在中文中更適合用&emsp;


個人認為這種做法在兩三個詞語時使用還是可行的，簡單粗暴。

2、通過text-align: justify;來達到兩端對齊

justify這個屬性就是實現兩端對齊文字效果的意思。看似簡單，但是W3C上給出了一大段的詳細說明，介紹存在和使用時候的一些問題。如圖：

中文詞語字數不同時兩端(等寬)對齊的方法小結

圖片出處連結：www.w3school.com.cn/cssref/pr_t…

看的心慌慌，但其實很多情景還是可以使用的。

但也別以為僅僅把對齊方式改為justify就可以了，事實上還不行。因為text-align:justify 不處理塊內的最後一行文字（包括塊內僅有一行文字的情況，這時既是第一行也是最後一行），所以，我們可以用偽類來解決。當然，在後面加一個行內空標籤來代替最後一行，這種實際上也能解決，但是因為這樣違反了結構表現分離的原則，所以我覺得不要醬紫做哈。

<style>    ul li {        list-style: none; }    a {        text-decoration:none;        color: black;        font-size: 14px;    }    span {        margin: 0 10px;    }    .hotsearch dd {        float: left;        line-height: 24px;        margin-right: 30px;        overflow: hidden;        text-align: justify;        width: 5em;    }    .hotsearch dd:after {        content: " ";        display: inline-block;        width: 90px;    }    .test1 {        text-align:justify;        width: 90px;        display: inline-block;    }    .test1:after {        content: " ";        display: inline-block;        width: 90px;    }    .box {        width: 235px;    }    .box input {        float: right;    }</style>
<body>    <ul class="box">        <li><div class="test1">姓名</div><input type="text"></li>        <li><div class="test1">畢業院校</div><input type="text"></li>        <li><div class="test1">工作單位</div><input type="text"></li>        <li><div class="test1">所在地</div><input type="text"></li>    </ul>    <div class="main">        <span style="font-size:12px;">            <dl class="hotsearch" style="width:300px;">                <dt>熱門搜尋</dt>                <dd><a href="#" target="_blank" ref="nav" class="w3">荷花</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w4">向日葵</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w3">鬱金香</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w2">鹿角海棠</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w2">六月雪</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w3">大花蕙蘭</a></dd>            </dl>        </span>    </div></body>

複製程式碼

需要注意的是demo中test1類名下的所有元素都會平分空間來兩邊對齊，所有如果冒號、輸入框用label修飾之類的話，就不能完美兩邊對齊排版。

3、通過letter-spacing來達到兩端對齊

letter-spacing屬性定義了在文字字元框之間插入多少空間。利用這點就能用來實現兩端對齊。

<style>    .f2 {        letter-spacing: 2em;        margin-right: -1em;    }    .f3 {        letter-spacing: 0.5em;        margin-right: 0.5em;    }    .f4 {        margin-right: 1em;    }</style>
<body>    <ul class="box">        <li><label class="f2">姓名</label><input type="text"></li>        <li><label class="f4">畢業院校</label><input type="text"></li>        <li><label class="f4">工作單位</label><input type="text"></li>        <li><label class="f3">所在地</label><input type="text"></li>    </ul></body>
複製程式碼

上述程式碼，f4其實是可以省略的，因為我這裡調整了下輸入框和旁邊文字的間距所以寫出了。因為letter-spacing的值是通過計算得到的，所以通常情況下字元最多的類是不用給letter-spacing的。

letter-spacing的計算公式為：設y個字兩端對齊，x為最大字數

                             （x-y）/ (y-1)

margin-right則是用來控制與右邊元素的邊距的。


綜上，本菜雞會的解決辦法如上。若有錯誤或問題歡迎交流，有其他方法也可交流。第一次寫文章，還望有緣看到的各位看官海涵??? 


相關文章