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

記錄在此供你們參考。