html+css寫出類似word目錄樣式的內容

word目錄的格式里這種很常見，要用html+css寫出來剛開始還有點懵。

左右兩邊都是內容撐開寬度，中間內容的寬度也不是確定的，也是隨着左右兩邊的內容動態變化的。

最終解決思路是，給右邊內容加上白色背景色，然后設置層級z-index，遮住右邊超出的線條。

html

<ul>
      <li><div class="list-nap1">行駛12公里</div><div class="list-line"></div><div class="list-con1">25元</div></li>
      <li><div class="list-nap1">時長30分鍾</div><div class="list-line"></div><div class="list-con1">5元</div></li>
      <li><div class="list-nap1">高速費/停車費</div><div class="list-line"></div><div class="list-con1">30元</div></li>
      <li><div class="list-nap1">遠途費</div><div class="list-line"></div><div class="list-con1">6元</div></li>
      <li><div class="list-nap1">個人支付</div><div class="list-line"></div><div class="list-con1">30元</div></li>
      <li><div class="list-nap1">企業支付</div><div class="list-line"></div><div class="list-con1">10元</div></li>
</ul>

css

ul li div{display:inline-block;}
.list-line{border-top:1px dashed #d8d8d8;position:absolute;top:11px;margin: 0 5px;width: 75%;}
.list-con1{ position: absolute;right: 0px;padding: 0 5px;z-index: 100;text-align: right;background: #fff;padding-right: 80px;}