完美全相容解決文字兩端對齊 justify 中文名稱對齊-html教學-PHP中文網

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>

登入後複製

效果