ul li 实现层级列表显示
实现效果如下:
实现要求具体如下:
1.标题有序号 上图标记1
2.标题下面的子集标题要有一定的缩进,且子集标题也有一定的序号,上图标记 2
3.如果子集标题内容过长,换行的时,开始的位置不能超过对应序号的位置,如上图标记3
dom:
<div class="rule-contents">
<ol class="rule-contents-items">
<li>
<div>
<span>第一个标题</span>
<ol>
<li>
第一个标题的第一条内容
</li>
<li>
第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容第二个标题的第二个内容
</li>
</ol>
</div>
</li>
<li>
<span>第二个标题</span>
<ol>
<li>第二个标题的第一条内容</li>
<li>
第二个标题的第二条内容
</li>
</ol>
</li>
<li>
<span>第三个标题</span>
<ol>
<li>第三个标题的第一个内容,第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容</li>
<li>第三个标题的第二条内容</li>
<li>第三个标题的第三条内容</li>
<li>第三个标题的第四条内容,第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容第三个标题的第一个内容</li>
</ol>
</li>
</ol>
</div>
css:
.rule-contents {
>ol>li {
margin-bottom: 10px;
list-style: outside; // 序号在内容外
list-style-type: decimal; // 排序标准为 数字
font-weight: 600;
span {
font-size: 16px;
}
ol {
padding-left: 20px;
li {
list-style-type: lower-latin; // 排序标准为 字母
font-weight: 400;
}
} }
.rule-contents-items {
padding-left: 10px;
}
}
注意部分:ol 的padding值不能少
否则如图:
子集对父级的缩进问题:用text-indent 无法达到效果,文字可以缩进,对应的序号无法实现缩进
如图:text-indent: 20px;
列表显示的序号类型多种多样,参考 http://www.w3school.com.cn/css/pr_list-style-type.asp
ul li 实现层级列表显示的更多相关文章
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- html ul li的学习
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...
- ul li 下的元素内容垂直居中
CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...
- DIV UL LI
<style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...
- 怎样去除ul li a标签文字下的下划线
这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- Ul li 横排 菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ul li 竖排 菜单
Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
随机推荐
- 复杂度定义 The Definition of Complexity
The upper bound Big-O: Definition: f(n) is in O(g(n)) if there are constants c0 and N0 such that f ...
- 小小知识点(五)——MATLAB对复数的操作
MATLAB程序 a=3+4*i %复数 real(a) %求复数的实部 imag(a) %求复数的虚部 abs(a) %求复数的模 angle(a) %求复数的相位 conj(a) %求复数的复共轭 ...
- 家庭记账本小程序之查(java web基础版六)
实现查询消费账单 1.main_left.jsp中该部分,调用search.jsp 2.search.jsp,提交到Servlet中的search方法 <%@ page language=&qu ...
- asp.net core Serilog的使用
先贴上关于使用这个日志组件的一些使用方法,等有时间了在吧官方的文档翻译一下吧,现在真是没时间. Serilog在使用上主要分为两大块: 第一块是主库,包括Serilog以及Serilog.AspNet ...
- sublime 官方正版,自己用的插件配置,最轻量级安装流程
到了一家新公司,新的办公电脑,移动工作站哦,配置很酷.需要自己安装编码环境,node.js(http-server)是必须要装的,编辑器个人比较喜欢sublime,现在归纳一下配置流程,ps:本人有点 ...
- EntityFramework优化:第一次启动优化
1. 预先生成视图 通过代码的方式来预先生成视图,要求EntityFramework是6.0及以上版本. 控制台程序: using System.Data.Entity.Infrastructure; ...
- MyBatis基础:MyBatis关联查询(4)
1. MyBatis关联查询简介 MyBatis中级联分为3中:association.collection及discriminator. ◊ association:一对一关联 ◊ collecti ...
- rsync 远程拷贝
rsync -vzP win7.qcow2 agu@192.168.1.198:/tmp/
- 前端获取checkbox复选框的值 通过数组形式传递
html代码: <form role="form" class="select_people"> <div style="displ ...
- Azure - Create your first function using Visual Studio
Azure Functions lets you execute your code in a serverless environment without having to first creat ...