CSS实现两端对齐的几种方法

时间 2019-11-24

标签 css 实现两端对齐几种方法栏目 CSS 繁體版

原文原文链接

方法一：html

比较拙劣但省事的作法是手动计算宽度，加一堆“&nbsp”模拟两端对齐的效果。这种方法咱们就不过多讨论了。浏览器

方法二：spa

text-align: justify;
    text-align-last: justify;

这种方法适用于多行文本两端对齐，text-align控制除最后一行之外的文本两端对齐，text-align-last控制最后一行文本两端对齐。code

方法三(兼容)：htm

旧版本的某些浏览器，不支持text-align-last属性，因此解决方案是在文本后面加一个inline-block的伪对象，模拟它为最后一行，或者在html代码中，文本最后加一个空的inline-block span。原理相同。对象

代码以下：ast

:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

这样伪对象就能够模拟出最后一行的效果了，浏览器会把所有文本作两端对齐处理原理

因此终极方案就是方法二加方法三啦~~亲测可用方法