ul默认的list-style不生效问题

最新推荐文章于 2023-07-20 13:26:04 发布
最新推荐文章于 2023-07-20 13:26:04 发布
阅读量2.8k 收藏 3
点赞数 4
分类专栏： list-style 文章标签： 列表 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingliu0824/article/details/107722956
版权

默认情况下ul下的li都会自带一个列表样式：如图
在这里插入图片描述
但是如果我们在全局设置了margin和padding为0后，无论是默认的还是自己设置的list-style都不会生效了。在这里插入图片描述
可以看看默认情况下的列表，列表样式是在content外面展示的
在这里插入图片描述
所以我们可以在ul标签中设置padding-left:20px(自己设置一个合适的宽度，不能太小否则也无法显示）或者设置margin-left解决这个问题.

小玲子小玲子
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Li list-style-image 图片垂直居中
01-19
list-style-image 图片垂直居中 如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的， 但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法， 就是使用ul li的backgrou-image（背景图片）来解决。 如下： 复制代码代码如下: ul li{ height:28px; /*列表项的高度*/ line-height:28px; /*列表项的行高，行高与高设为相同，文字垂直居中*/ text-indent:15px; /*文字缩进15个像素，不然压到图表了*/ background-image
基础html定义值——包含 list-style属性
qq_44582712的博客
11-28 1399
ul 标签 定义无序列表。 ol 标签 定义有序列表。 list-style是list-style-type不加属性的简写 list-style-type 属性设置列表项标记的类型： none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 padding:0;就是上右下左 内边距的宽度全部清零 padding设...
li设置了弹性盒子 他的list-style属性失效了
weixin_51097961的博客
07-20 264
list-style作用的基础是元素的display属性值基于display:list-item的基础上的，display:list-item会让元素以列表块元素的形式存在，之后我们才可以设置list-style,现在我们将display:flex设为这个，所以就覆盖了display:list-item,以至于我们的list-style失效了。在li里面在套一个div 对div使用flex。给li的子元素分别设置float。
解决list-style-type属性失效
weixin_33801856的博客
03-02 801
有的时候我们在网页中对li标签设置了它的css属性，比如list-style-type:disc;然而我们的网页前端呈现结果中却看不到我们的效果，但是css又显示没错，我们该如何解决？其实造成这种现象的原因有两种可能，一种是li属性设置了list-style-position:outside;列表符号的位置在盒模型之外，所以第二个列表项的符号被第一个列表项盖住，或者被前面的框架覆盖，所以就看不到效...
list-style-type 为什么总失效？
我爱1和0 个人主页:521100.net
04-23 2827
（一）list-style-type常用方法：   list-style属性一般都设置为none 。需要加 "·" 或是别的符号  最好直接用键盘输入 或用转义符号 ul{list-style:none; margin:0; padding:0}  ui li{line-height:Npx; } 一般是20px; 只要这样设置， 基本都不会有问题。   一般CS
css ul li list-style-type 的使用
caperxi的博客
12-24 2730
ul & li : 前端学习中，经常用到 < ul > < li > 两个标签来做菜单、列表等，而ul标签默认是无序列表： 代码如下： <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li&g...
html ul list style,CSS list-style列表样式属性用法介绍
weixin_39732249的博客
06-15 1586
list-style我们使用得最多的地方就是ul li中了，但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别在哪里，下面我来给各位朋友详细介绍。解析CSS列表样式属性list-style平时制作页面中可对属性list-style在list-item对象中常用，但用的都不深。一般都设为none重置整个页面就差...
ul>li的css>>>list-style属性
weixin_40398103的博客
04-15 2495
CSS list-style 属性 1、默认值： disc outside none 继承：yes 版本：CSS1 JavaScript语法：object.style.listStyle="decimal inside" 2、属性值： list-style-type: 设置列表项标记的类型。 list-style-position: 设置在何处放置列表项...
web前端学习（十七）——CSS3列表属性（list-style）的相关设置
热门推荐
胜天半子祁同伟
01-26 1万+
web前端学习（十七）——CSS3列表属性（list-style）的相关设置
CSS list-style属性控制ul标签样式
weixin_30565327的博客
07-12 133
试一试 <style type="text/css" media="all"> ul { list-style-type: disc; } ul#circle { ...
CSS list-style熟悉解释
01-19
原来工作中曾经碰到过UL列表里一些异常的表现, 加上昨天看到了http://bbs.blueidea.com/thread-2984871-1-1.html 这个贴子,所以测试了一下list-style的各种属性,发现了一个有意思的现象 先看一下CSS手册中,对于...
CSS list-style-type属性使用方法
01-19
语法 { list-style-type: sType } 可能的值 sType 一个字符串，用于指定以下值之一： disc 默认值。实心圆。 circle 空心圆。 decimal 1、2、3、4 等等。 lower-alpha a、b、c、d ...
CSS: list-style 和 inline使用方法详解
01-21
平时只顾着写程序，写 div 或 span 或 ul li 之类的，常常遇到一莫名的问题，自己的解决方式可能是 top: -10px 也可能 float:left 之类的，问题当然能得到解决，就好像坐轮船到纽约和坐飞机到纽约的结果一样，都是到...
UL认证61010-1标准
06-16
UL认证61010-1标准
CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现
11-21
ul.none{list-style-type:none} ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} </style...
UL 60335-2-40-2022-第四版
12-29
UL 60335-2-40-2022-第四版 最新发布的UL标准文件
UL 758 2022-1-20.pdf
03-02
UL 758 2022-1-20.pdf
UL61010-2-030认证标准
06-16
UL61010-2-030认证标准
UL248-1.pdf
05-30
小型熔断器 第1部分 小型熔断器定义和小型熔断体通用要求UL248-1熔断器标准 应用于电力电子行业
ul的list-style-type不生效
最新发布
12-17
<ul style="list-style-type: none;"> <li>list-style-type属性 <li>list-style-position属性 <li>list-style-image属性 </ul> ``` ```html <ul> <li style="list-style-type: none;">list-style-type属性 <li ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值