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:;text-align: right;background: #fff;padding-right: 80px;}
html+css写出类似word目录样式的内容的更多相关文章
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?
前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
- 利用display属性写出表格的布局样式
demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小样例,IE8及下面浏览器不支持本演示样例< ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- 用html标签+css写出旋转的正方体
有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写.下面看一下我写的. 这一段是样式表: <style> *{ margin: 0; ...
随机推荐
- resin设置jvm参数
http://www.quiee.com.cn/archives/592/ resin resin3.0 及前期版本内存设置, 如下: 启动时设置虚拟内存: unix> bin/httpd.sh ...
- C# Oracle.ManagedDataAccess 批量更新表数据
这是我第一次发表博客.以前经常到博客园查找相关技术和代码,今天在写一段小程序时出现了问题, 但在网上没能找到理想的解决方法.故注册了博客园,想与新手分享(因为本人也不是什么高手). vb.net和C# ...
- 设备管理器里“SM总线控制器”、“其它PCI桥设备”驱动有问题
WinXP重装系统后设备管理器里面出现黄色问号.各自是"SM总线控制器"和"其它PCI桥设备",主板是七彩虹的,芯片组是 geForce 7025的,南桥是 n ...
- Windows 2003 远程桌面
- 浏览器在线打开pdf
https://www.cnblogs.com/Leo_wl/p/5735001.html#_label0 https://blog.csdn.net/li_cheng_liang/article/d ...
- oracle instant client,tnsping,tnsnames.ora和ORACLE_HOME
前段时间要远程连接oracle数据库,可是又不想在自己电脑上完整安装oracleclient,于是到oracle官网下载了轻量级clientinstant client. 这玩意没有图形界面,全靠sq ...
- VS2015调用Matlab2017a环境配置(转载)
VS2015调用Matlab2017a环境配置 一定要在Debug+x64平台下进行配置,x64,x64,x64!!!* 1.配置环境变量 右键计算机—–>属性——>高级系统设置——> ...
- Check the difficulty of problems - poj 2151 (概率+DP)
有 T(1<T<=1000) 支队伍和 M(0<M<=30) 个题目,已知每支队伍 i 解决每道题目 j 的的概率 p[i][j],现在问:每支队伍至少解决一道题,且解题最多的 ...
- Tuning 12 manage statistics
这个 stattistics 对解析 sql 时的优化器有很重要的作用, 优化器是基于 statistics 来进行优化的. desc dbms_stats 包也可以 desc (早期使用 analy ...
- PAT005 Path in a Heap
题目: Insert a sequence of given numbers into an initially empty min-heap H. Then for any given index ...