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元素的兩端對齊布局

記錄在此供大家參考。