首頁 >web前端 >html教學 >完美 全相容 解決 文字兩端對齊 justify 中文名稱對齊

完美 全相容 解決 文字兩端對齊 justify 中文名稱對齊

WBOY
WBOY原創
2016-08-26 10:13:152284瀏覽

text-align:justify; 所有瀏覽器都支持,text-justify之類的卻只有IE支持,就不要考慮了。

justify我的理解,使元素內部的子元素兩端對齊,子元素當然只能是inline或inline-block。但justify對最後一行是無能為力的。我們在對齊姓名時,因為只有一行,當作最後一行,所以不會兩端對齊的效果。

姓名對齊我們比較常用的是 (半個中文空格), (一個中文空格)來添充兩個字,三個字的姓名,使包括四字的姓名都能對齊。例如:


 

歐陽大咖

張 小 三

王  五 


 

但我們發現大部分瀏覽器是正常的,但不幸的是我們發現手機瀏覽器打開大部分是不行的,效果就像下面那樣對不齊。


 

歐陽大咖

張 小 三

王  五 


 

所以就想到了用text-align:justify;但要怎麼解決單行不能兩端對齊呢,思路就是:

  讓瀏覽器認為這不是最後一行就行了

      在元素裡面加上一個會換行的空的子元素例如:

<span style="color: #0000ff;"><</span><span style="color: #800000;">i </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="display:inline-block;width:100%;height:0;"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>

 

範例:html結構

                <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="arter"</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品名称<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  宝贝儿<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>作品类型<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>艺术家<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  张玉瀛<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>风格<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  超现实<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>材质<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  布面油画<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>题材<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  人物<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>创作时间<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  2011<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>所在位置<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  华东<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>尺寸<span style="color: #0000ff;"><</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>:  78x78cm<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

scss

<span style="color: #800000;">         li</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#4a4a4a</span>;<span style="color: #ff0000;">
                    span{height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">65px</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">justify</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">vertical-align</span>:<span style="color: #0000ff;">top</span>;<span style="color: #ff0000;">
                         i{display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
                    }
                }</span>

效果

幾點注意事項:

1)span要設定為inline-block;才能和後面的字同行顯示,同時設定width才會使換行;

2)必須要設定span元素的height,和overflow:hidden否則還是會佔高度;

3)vertical-align:top;可以使,li內的span和後面的字,高度對齊,否則會變成

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn