css 两端对齐

模拟一个div两端对齐的情况：

<div class="box">两端对齐</div>

.box {
  width: 200px;
  height: 36px;
  line-height: 36px;
  margin: 20px auto;
  background: #eee;
  text-align: justify;
  -webkit-text-align: justify;
  text-align-last: justify;/* ie9*/
  -webkit-text-align-last: justify;/*chrome 20+*/
  text-justify: distribute; /* firefox */
}

效果：

总结：

text-align: justify;
-webkit-text-align: justify;
text-align-last: justify;/* ie9*/
-webkit-text-align-last: justify;/*chrome 20+*/
text-justify: distribute; /* firefox */