html模拟word目录,HTML+CSS入门 如何写出类似word目录样式的内容

本篇教程介绍了HTML+CSS入门 如何写出类似word目录样式的内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

word目录的格式里这种很常见，要用html+css写出来刚开始还有点懵。

左右两边都是内容撑开宽度，中间内容的宽度也不是确定的，也是随着左右两边的内容动态变化的。

最终解决思路是，给右边内容加上白色背景色，然后设置层级z-index，遮住右边超出的线条。

html

• 行驶12公里
  25元
• 时长30分钟
  5元
• 高速费/停车费
  30元
• 远途费
  6元
• 个人支付
  30元
• 企业支付
  10元

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;}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！