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

最新推荐文章于 2023-07-20 13:26:04 发布
最新推荐文章于 2023-07-20 13:26:04 发布
阅读量3.1k 收藏 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解决这个问题.

CSS中的ul与li样式详解
diaoxiaonian5881的博客
06-24 905
　ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。 　　一、list-style-type属性 　　list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-s...
CSS学习笔记
a15107071954的博客
10-11 320
CSS简介 CSS是一个层叠样式表，网页实际上是一个多层结构，通过css可以为网页的每一层设置样式，而最终我们看到的只是网页的最上一层。 总之，css是用来设置网页中元素的样式。 CSS的使用 第一张方式：（内联样式、行内样式）在标签内部通过style属性来设置元素的样式 <p style="color:red;font-size:60px;"></p> 但是这种方式不推荐使用。问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须每一个元素中都复
list-style无效
肥羊集团的专栏
07-29 1822
原因：应用了list-style-position: outside; 属性造成的。 左浮动会使盒模型一个挨一个横向排练 列表符号的位置在盒模型之外 所以第二个列表项的符号被第一个列表项盖住 另外应用float:left;属性也会造成LI元素不正常。 解决办法：把list-style-position:outside;改成list-style-position: insi
CSS 列表list-style属性不起作用的原因
养猫的阿甘
11-06 1974
今天遇到list-style属性不管如何设置都不起作用。总是不显示任何样式。查看原因是因为在li元素上使用了:after伪类进行浮动清除。对于li元素如果确实需要清除浮动，只能写实体的元素进行clear:both，不可以使用伪类清除浮动，否则list-style属性的样式将不会应用的li属性。 ...
list-style-type 为什么总失效？
我爱1和0 个人主页:521100.net
04-23 2945
（一）list-style-type常用方法：   list-style属性一般都设置为none 。需要加 "·" 或是别的符号  最好直接用键盘输入 或用转义符号 ul{list-style:none; margin:0; padding:0}  ui li{line-height:Npx; } 一般是20px; 只要这样设置， 基本都不会有问题。   一般CS
li设置了弹性盒子 他的list-style属性失效了
weixin_51097961的博客
07-20 381
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样式不显示问题
weixin_30602505的博客
07-29 793
<li> display要使用list-item ，不要使用block，要不然会造成不显示的问题。 转载于:https://www.cnblogs.com/xueshanshan/p/4686884.html
关于IE6下Li标签左边多出宽16pxBUG的问题
12-13
这个问题主要涉及到`list-style`相关的CSS属性，包括`list-style-type`和`list-style-position`。 首先，`<li>`标签通常用于创建HTML列表，即`<ul>`或`<ol>`元素中的列表项。默认情况下，`<li>`标签会在其左侧显示...
elementUI参考学习 vue运行问题 以及组件style样式设置的区别
qq_43944285的博客
05-14 652
组件样式 scoped 和 /deep/ 加scoped 后不会修改其他组件的 加/deep/ 后就可以修改组件内部的 加!important 强制优先级最高覆盖样式 */ <style scoped> /* 加scoped 后不会修改其他组件的 加/deep/ 后就可以修改组件内部的 加!important 强制优先级最高覆盖样式 */ /deep/.el-pager li.active { background-color
BootStrap 入门教程学习摘要笔记
抓更够
08-15 1865
个人在学习BootStrap入门教程时做的摘要笔记 时不时更新
CSS-Cascading Style Sheet_层叠样式表_用法详解
qq_31455841的博客
09-26 2810
CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表 1. 专门用来为HTML标签添加样式 2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 3. 层叠属于CSS的三大特性之一 4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 2. CSS 使用目的 1. CSS 之前 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单
ol、ul的list-style不显示问题
weixin_30908707的博客
07-09 775
今天在项目中遇到一个问题，我使用ol，并且在css里设置list-style不为none，但是始终显示不了序号，当然最初我认为是css样式层叠被覆盖，但是连最终神器都用上了： ol { list-style-type: decimal!important; } 问题却还是没有解决，我知道我该考虑其它原因了。 很少见的，在Google里没有第一时间搜到答案。 于是新建一个页面，发现一切正常，经过一番...
html ul list style,CSS list-style列表样式属性用法介绍
weixin_39732249的博客
06-15 1843
list-style我们使用得最多的地方就是ul li中了，但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别在哪里，下面我来给各位朋友详细介绍。解析CSS列表样式属性list-style平时制作页面中可对属性list-style在list-item对象中常用，但用的都不深。一般都设为none重置整个页面就差...
ul的list-style-type失效问题
qq_45560350的博客
02-25 1741
用了网上最流行的两种解决方法（修改float或list-style-position:inside）也无法解决的bug 最后发现是因为给li设置了display:inline-block; list-style属性所能应用的元素是display:list-item;（li的默认属性值）的元素 ...
ul>li的css>>>list-style属性
weixin_40398103的博客
04-15 2593
CSS list-style 属性 1、默认值： disc outside none 继承：yes 版本：CSS1 JavaScript语法：object.style.listStyle="decimal inside" 2、属性值： list-style-type: 设置列表项标记的类型。 list-style-position: 设置在何处放置列表项...
【解决】css设置li的overflow:hidden导致ul的list-style无效
qq_44162778的博客
03-17 271
问题描述：解决办法：
css ul li list-style-type 的使用
caperxi的博客
12-24 2870
ul & li : 前端学习中，经常用到 < ul > < li > 两个标签来做菜单、列表等，而ul标签默认是无序列表： 代码如下： <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li&g...
CSS中的ul与li样式详解 list-type
weixin_30496751的博客
02-11 375
转自新浪博客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属性 　　li...
UL和LI的用法
04-12 2793
UL和LI的用法今天用到序列圆点的，直接用的通不过w3c检测，必须和ul或ol结合使用，但问题是用了ul后左边空出了很多。而且圆点是在内容外面的（形成段落的形式），本来的格式是圆点和文字在一起的，后来经过讨论还是在外面的好看。而用css定义的圆点还是可以用属性来变换的（可以是空心或实心等），不同操作系统会显示按操作系统的习惯显示（圆或方不同）。下面是用到的代码：
ul的list-style-type不生效
最新发布
12-17
```html <ul style="list-style-type: none;"> <li>list-style-type属性</li> <li>list-style-position属性</li> <li>list-style-image属性</li> </ul> ``` ```html <ul> <li style="list-style-type: none;">list-style-type属性</li> <li style="list-style-type: none;">list-style-position属性</li> <li style="list-style-type: none;">list-style-image属性</li> </ul> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值