在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求

text-align: justify;

我们已经知道，使用浮动布局是一个次等选择，因为浮动布局会导致页面全局渲染2次而降低渲染效率，因此陆续出现了许多浮动布局的替换方案。比如新旧两种弹性盒模型，以及接下来我们需要分析到的内联块元素的两端对齐。

Apple官网也是使用了内联块元素的两端对齐。

    
    
     
      Javascript
     
    
     
      Css
     
    
     
      Angular
     
    
     
      Gulp
     
    
     
      Bootstrap
     
    

.wrap {    max-width: 600px;    background-color: orange;    color: #fff;    margin: 20px auto;    text-align: justify;    height: 44px;    line-height: 44px;}.item {    display: inline-block;}.wrap::after {    display: inline-block;    content: '';    width: 100%;    line-height: 0;    font-size: 0;}

想要使用justify达到预期效果，必须注意到以下一点

内联元素最后一排不会两端居中，而会左对齐。

因此，如果导航元素只有一排的话，text-align: justify并不会生效， 所以我们在wrap子元素的最后添加一个after伪类，并将他的宽度设置为100%，那么最后一排就是这个after伪类了，效果就得意正常实现。