CSS 单行文字水平分散对齐

2017-08-02

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

<div class="tab-bar navbar-fixed-bottom">
  <a href="#" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i><span>主页</span></a>
  <a href="#" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i><span>主页</span></a>
  <a href="#" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i><span>主页</span></a>
  <a href="#" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i><span>主页</span></a>
  <a href="#" class="btn btn-default"><i class="fa fa-home" aria-hidden="true"></i><span>主页</span></a>
</div>

自然想到用text-align

1	text-align: justify;

但有个问题, justify 是说对于多行文字,中间的文字分散对齐,最后一行还是左对齐. 所以对于单行文字这不起作用.

1 2	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;
}