完美全兼容解决文字两端对齐 justify 中文姓名对齐-html教程-PHP中文网

完美全兼容解决文字两端对齐 justify 中文姓名对齐

php中文网

发布： 2016-08-26 10:13:15

原创

2582人浏览过

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>

登录后复制

效果