ol、ul的list-style不显示问题

今天在项目中遇到一个问题，我使用ol，并且在css里设置list-style不为none，但是始终显示不了序号，当然最初我认为是css样式层叠被覆盖，但是连最终神器都用上了：

ol { list-style-type: decimal!important; }

问题却还是没有解决，我知道我该考虑其它原因了。

很少见的，在Google里没有第一时间搜到答案。

于是新建一个页面，发现一切正常，经过一番折腾，在reset.css里发现

body, div, ul, ol......{ margin: 0; padding: 0; }

豁然开朗，是不是padding把显示序号的那一部分给设置没了？

果然，问题就在这里了。padding设置去除，一切恢复正常。

ol、ul的list-style不显示问题

时间： 2024-10-05 08:23:21

ol、ul的list-style不显示问题的相关文章

html系列教程--ol ul li

<li> 标签:配合ol,ul实现有序,无序列表以及导航实现. demo: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> &

HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>

HTML 列表 <ol><ul><li><dl><dt><dd>

<ol>标签-有序列表定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异在 HTML 4.01 中,ol 元素的 "compact"."start" 以及 "type" 属性是不被赞成使用的. 在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"."start" 以及 "type" 属性是不被支持的.

为了方便理解知识,我通常会对一些英语简写追根溯源,在火狐开发者社区里面找到了一些资料. li是 list item的简写不是list的简写 ol是ordered list的简写 ul是unordered list的简写 web标准规定li必须在ol里面或者ul里面.为什么?怎么理解呢? 明白了上面的简写就能理解这件事情了. ol 和ul相当于一个集合,那集合里面的元素也应该用一个元素表示吧,这个元素就是li li和ol.li和ol就是元素与集合的关系.

Vue 的style绑定显示background-image

data () { return { img: require('你的json资源路径') } } :style="{backgroundImage: 'url(' + img + ')'}"

css列表属性与display属性

list-style:none 内联标签不能设宽高 display:"inline-block" 有内联标签不独占一行的属性和块级标签可设宽高的属性 display:none 不显示,位置也没了 display是显示.展示的意思 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

[html/js]点击标题出现下拉列表

效果初始点击后参考代码 <!DOCTYPE html> <html> <head> <title>Layer group example</title> <script src="js/jquery-1.11.1.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"&

HTML a标签 img标签 ul列表、ol列表、dl列表标签,table表格标签,lable

a标签其实就是用来做跳转的 a标签的作用:页面跳转.锚(页就是类似书签的东西,在URL中显示出#) <a href="http://www.baidu.com" traget = "_blank">超连接文字</a> traget = "_blank" 该属性的意思是点击后新窗口打开连接,如果没有改项意思就是直接在本页面打开. <a href="#i3" traget = "_blank

ol 与ul 的区别

1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <ul> 6 <li>咖啡</li> 7 <li>牛奶</li> 8 <li>茶</li> 9 </ol> 10 11 <ol start="5"> 12 <li>咖啡</li> 13 <li>牛奶</li> 14 &

关于bootstrap--列表（ol、ul）

1.在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-styled"将前面的数字和符号去掉,bootstrap样式为: .list-unstyled { padding-left: 0; list-style: none; } 2.在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-inline&qu