ul ol li的序号编号样式

首先来那看一个序号样式的例子,下面是html代码(做参考)

<ol>
  <li>列表内容列表内容列表内容列表</li>
  <li>列表内容列表内容列表内容列表</li>
  <li>列表内容列表</li>
  <li>列表内容列表内容4</li>
  <li>列表内容列表内容5</li>
</ol>

一、示例

1.自定义序号,

一般的列表顺序都是以1.2.3.为序号,但需要“、”代替“.”  ,这时我们就要自己定义,主要使用了CSS的counter-increment对部分和子部分进行编号,但问题是折行的部分不能自动缩进

   ol{list-style-type:none;counter-reset:sectioncounter;width:200px;}
   ol li:before {
       content:counter(sectioncounter) "、";
       counter-increment:sectioncounter;
    }

执行后为:

2. 标准格式

   ol{list-style-type:demical;width:200px;}
   ol li{ list-style-position:outside;}

执行后为:

二、css的UL、ol、li样式

1.list-style-type 属性设置列表项标记的类型。

取值:disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写罗马文字| lower-greek小写希腊字母 | lower-latin小写拉丁文 | upper-latin 大写拉丁文| armenian亚美尼亚数字 | georgian乔治亚数字 | lower-alpha小写拉丁文 | upper-alpha大写拉丁文 | none无 | inherit继承
初始值: disc

2.list-style-image 属性使用图像来替换列表项的标记

取值:  list-style-image:none/url

3.list-style-position 属性设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

取值: list-style-position:inside/outside

注:有的时候outside不起作用,原因是加了浮动,

4.list-style属性

list-style 简写属性在一个声明中设置所有的列表属性。

取值:li-style:list-style-type/list-style-image/list-style-position

 

注:有的时候列序号不起作用,原因是加了浮动,

解决办法是 list-style-position:outside;改成list-style-position: inside;或去掉浮动设置

时间: 2024-10-12 14:16:35

ul ol li的序号编号样式的相关文章

ol li 不显示编号

第一种可能性是样式重置导致 去掉list-style:none; 第二种可能性是设置了*{margin:0;padding:0} 可以在需要的位置加上margin-left:10px;(根据自己需要设定) 有序列表需要一定的边距才可以设置的 ul>li{ margin-left:30px; list-style-type: disc; } ol>li{ margin-left: 30px; list-style: decimal; } 原文地址:https://www.cnblogs.com/

ul的li在消除默认样式后会缩进显示的解决方案

ul在{list-style:none;}后会缩进显示li的内容,如下图显示: 要想实现li和左边对齐,则需要对ul设置样式{margin:0;padding:0;}即可:

&lt;UL&gt;中&lt;li&gt;标签前编号图片的简单调用

<style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http://top.baidu.com/img/icon-num.gif) no-repeat 0px 5px} .men ul li{ padding-left:20px; line-height:25px;} </style> <body> <div class="men&qu

有序序列ol li 详解(ol li 标号未显示?)

ol定义和用法 <ol> 标签定义了一个有序列表. 列表排序以数字来显示.使用<li> 标签来定义列表选项. 基本语法如下: <ol> <li>菠萝</li> <li>西瓜</li> <li>火龙果</li> </ol> 运行结果: ol属性 属性 值 描述 compact compact HTML5中不支持,不赞成使用.请使用样式取代它. 规定列表呈现的效果比正常情况更小巧. reve

CSS中的ul与li样式详解 list-type

转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.list-style-position属性和list-style属性. 一.list-style-type属性 list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰.list-style-type属性是一个可继承的属

ol,li,ul,dl,dt,dd

块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……</li> <li>……</li> </ol> 表现为: 1…… 2…… 3…… ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>……</li> <li>……</li> </ul&

JQ 获取ul\ol 下面li的个数

使用 jQuery 获取 ul 下面 li 的个数,那么我们需要遍历我们的ul.如果你的ul有class .id 或两者都没,您可以使用 ul 标签来遍历. //遍历ul 获取li个数 $(".ulClass/#ulId/ul").each(function (index, value) { var l = $(this).find("li").length; console.log(l); }); 或者您不知道到 this 指代啥,您也可以不用this. $(&q

html中有序列表标签ol,li的高级应用

本文主要介绍html中有序列表标签ol,li的高级应用, 在网页设计时我们设计有序列表内容时,经常会在每个ITEM前手工加上一个数值,或是由程序加上这个数值. 而如果使用有序列表标签ol和li,则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了. 一般的标签ol和li有序列表应用代码如下: <ol> <li>列表内容一</li> <li>列表内容二</li> <li>列表

[HTML]去除li前面的小黑点,和ul、LI部分属性

[转] 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.[HTML]去除li前面的小黑点,和ul.LI部分属性[转] 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和.ul下写入list-sytle:none;当然有的会这样来写list-style-typ