display：inline-block两端对齐 实现列表

作一个ul li 列表相似这样的平时常常会用到

要是用浮动作仍是比较简单的直接左右浮动，清除浮动就能够搞定了，由于最近用display:inline-block用的比较顺手，因此就尝试一下。
经过text-align:left，text-align:right，能够控制元素靠左仍是靠右，这种方法只能作到同一个元素之下的全部元素同时靠左或者靠右，经过百度一番找到text-align: justify，代码以下：

<ul>
            <li style="width: 100%;text-align: justify">
              <span style="display: inline-block;">时间都会发加快速度回房间卡是否会</span>
              <p style="display: inline-block;">sdfsaffasd</p>
              <i class="justify-last"></i>
            </li>
            <li style="width: 100%;text-align: justify">
              <p style="display: inline-block;">时间都会发加快速度回房间卡是否会</p>
              <p style="display: inline-block;">sdfsaffasd</p>
              <i class="justify-last"></i>
            </li>
            <li style="width: 100%;text-align: justify">
              <p style="display: inline-block;">时间都会发加快速度回房间卡是否会</p>
              <p style="display: inline-block;">sdfsaffasd</p>
              <i class="justify-last"></i>
            </li>
            <li style="width: 100%;text-align: justify">
              <p style="display: inline-block;">时间都会发加快速度回房间卡是否会</p>
              <p style="display: inline-block;">sdfsaffasd</p>
              <i class="justify-last"></i>
            </li>
          </ul>

.justify-last{
    display:inline-block;width:100%;height:0;
  }

最为关键的就是要在li的最后一行加入一个空的宽度100%的inline-block元素，这个方法有一个缺点就是加入空元素会占位每行之间会留有空隙，我如今尚未找到解决办法，有方法的同窗能够说一下。
另外还找到一种用法：

<ul class="arter">
          <li><span>做品名称<i></i></span>：  宝贝儿</li>
          <li><span>做品类型<i></i></span>：  油画</li>
          <li><span>艺术家<i></i></span>：  张玉瀛</li>
          <li><span>风格<i></i></span>：  超现实</li>
          <li><span>材质<i></i></span>：  布面油画</li>
          <li><span>题材<i></i></span>：  人物</li>
          <li><span>创做时间<i></i></span>：  2011</li>
          <li><span>所在位置<i></i></span>：  华东</li>
          <li><span>尺寸<i></i></span>：  78x78cm</li>
  </ul>

.arter li{
    width: 200px;
    font-size:14px;line-height:24px;color:#4a4a4a;
  }
  .arter span {
    height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;
  }
  .arter i {
    display:inline-block;width:100%;height:0;
  }

能够使文字两端对齐，原理是同样的，代码来自于兼容ie6/ie7的inline-block元素的两端对齐布局

记录在此供你们参考。