html+css寫出類似word目錄樣式的內容
阿新 • • 發佈:2017-11-06
設置 posit 背景色 das pla borde html 背景 z-index
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;}
html+css寫出類似word目錄樣式的內容