html 强制分散对齐,CSS 水平分散对齐

想要一排按钮均匀分散对齐:

主页

主页

主页

主页

主页

自然想到用text-align

text-align: justify;

但有个问题, justify 是说对于多行文字,中间的文字分散对齐,最后一行还是左对齐.

所以对于单行文字这不起作用.

text-justify: distribute-all-lines;

text-align-last: justify;

再加入条件, 令所有文字和最后一行都分散对齐.

这样写在chrome上可以,Safari不支持.

既然只能多行文字分散,那就用伪类造一个.

最后的CSS如下:

// 分散对齐

.disperse {

text-align: justify;

text-justify: distribute-all-lines;

text-align-last: justify;

}

.disperse::after {

content: ".";

display: inline-block;

width: 100%;

visibility: hidden;

height: 0;

overflow: hidden;

}