列表中的标题固定宽度后两端对齐CSS

<ul class="info-ul">
      <li class="info-li clearfix">
        <span class="titleText">类型<i></i></span>
        <span class="punctual">：</span>
        <span class="content">课题</span>
      </li>      
      <li class="info-li clearfix">
        <span class="titleText">联系电话</span>
        <span class="punctual">：</span>
        <span class="content">13211112222</span>
      </li>
      <li class="info-li clearfix">
        <span class="titleText">自适应</span>
        <span class="punctual">：</span>
        <span class="content">测试测试测试测试</span>
      </li>
</ul>

.info-ul {
    padding: 20px 0 0 20px;
    .info-li {
      padding-bottom: 10px;
      .punctual {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        float: left;
        margin-right: 5px;
        display: inline-block;
      }
      .titleText {
        width: 70px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        float: left;
        position: relative;
        padding-left: 12px;
        text-align: justify;
        text-align-last: justify;
        background: url(../images/arrow.png) no-repeat 0 4px;
      }
      .content {
        width: 620px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        float: left;
      }
    }
    .info-li:last-child {
      padding-bottom: 0;
    }
  }