实现列表两端完全对其text-aligh:justify 和display：inline-block

dispaly:inline-block 对于块级元素，在IE8-下是不兼容的，所以一般不要用在这些元素上，可以用在inline元素上：span

text-align:justify实现子元素完全对齐父元素的两端，这样就可以根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度。

demo：

.justify{ text-align: justify;
    border: 1px solid #000;}
.justify span{ display:inline-block;height:100px; background-color: red; width:300px;}

<div class="justify">
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
</div>

可以实现两端完全对齐，其实在子元素在一行不能完全放下，需要换行，如果最后一行的子元素比较少，不能完全占满父元素，最后一行就不能实现与父元素的两端完全对齐。解决办法：
在最后添加一个元素
.justify_fix{ display:inline-block; width:100%; hieght:0; overflow:hidden;}

<div class="justify">
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span class="justify_fix">这是列表元素</span>
</div>
为了在ie8-也可以实现同样的效果需要写样写

列表元素及其内部标签的结束标签需要连在一起   如果列表标签内嵌多层，则所有层级的结束标签都要连续。

<div class="justify">
   <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
   <span class="justify-fix"></span></div>

tip：
子元素不能连在一起，也就是span之间不能<span></span><span></span>这样写，上一个的结束标签与下一个的开始标签连在一起，需要换行书写；
 
很多时候，我们希望列表的最后一行是左对齐排列的，而不是两端对齐，这时候怎么办呢？
原理与上面的两端对齐一致。就是复制几个列表元素的外层标签，等宽，但高度为0，里面就是个&nbsp;(不可缺)，复制的个数一般就是每行元素的列表个数啦，这样肯定可以保证最后一行元素一定是左对齐排列的啦

.left_fix{height:0; padding:0; overflow:hidden;}

<div class="justify">
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span>这是列表元素</span>
    <span class="justify_fix">这是列表元素</span>
</div>
为了在ie8-也可以实现同样的效果需要写样写

列表元素及其内部标签的结束标签需要连在一起   如果列表标签内嵌多层，则所有层级的结束标签都要连续。

<div class="justify">
   <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
    <span>
       <a href="#"><img src="data:images/1s.jpg"/></a>
       <span>描述</span></span>
   <span class="justify-left"></span>
   <span class="justify-left"></span>
  <span class="justify-left"></span></div>