li不显示使用overflow:hidden导致Li前面点、圈等样式不见

   点评:用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候,list-style不起作用,不显示前面的点、圈等样式,在ul或li内加入样式:list-style-position: inside; 即可

  实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。

  解决办法:在ul或li内加入样式:list-style-position: inside; 即可。注意适当调节padding位置使之最适合。

  列表的样式:

  disc : CSS1 实心圆

  circle :CSS1 空心圆

  square :CSS1 实心方块

  decimal :  CSS1 阿拉伯数字

  lower-roman :  CSS1 小写罗马数字

  upper-roman : CSS1 大写罗马数字

  lower-alpha : CSS1 小写英文字母

  upper-alpha : CSS1 大写英文字母

  none : CSS1 不使用项目符号

  armenian : CSS2 传统的亚美尼亚数字

  cjk-ideographic:CSS2 浅白的表意数字

  georgian : CSS2 传统的乔治数字

  lower-greek :  CSS2 基础的希腊小写字母

  hebrew : CSS2 传统的希伯莱数字

  hiragana : CSS2 日文平假名字符

  hiragana-iroha: CSS2 日文平假名序

  katakana : CSS2 日文片假名字符

  katakana-iroha: CSS2 日文片假名序号

  lower-latin : CSS2 小写拉丁字母

  upper-latin : CSS2 大写拉丁字母

  *list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显露

  *list-style-position : outside | inside

  outside:  列表项目标记放置在文本以外,且围绕文本不根据标记对齐

  inside :  列表项目标记放置在文本以内,且围绕文本根据标记对齐

时间: 2025-01-03 07:31:36

li不显示使用overflow:hidden导致Li前面点、圈等样式不见的相关文章

css中的overflow:hidden; zoom:1

如果子元素大小超过父元素的大小,那么:     overflow:hidden会隐藏掉超出的部分     overflow:auto会显示滚动条     overflow:hidden;和overflow:auto;都可以解决非IE浏览器下清除浮动的问题     zoom:1;是给ie6看的  

CSS让ul所有的li居中显示的方法

  CSS ul li居中本来以为很容易就实现了,因为平时都是让li float:left,这样后面的可以排成一行,对居中没做要求,不过最近搞个项目,必须让ui的每个li都居中显示,这可让我难为了,没想到一时把我难坏了,不过还是被我解决了.下面说下方法: 我的方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将这个属性改为inline就可以让ul li居中,简单吧!下面来段代码实例: 呵呵,由此你可以做成一款菜单了.

浏览器兼容性-chrome浏览器li下显示input表单宽度总大于IE浏览器

问题描述 chrome浏览器li下显示input表单宽度总大于IE浏览器 解决方案 input宽度设置了没有?要不每个浏览器input默认宽度不一样 解决方案二: 你自己设置个input的固定宽度

html5-css3多列设置ul中的li两列显示,但出现的问题是点击其中的li,实际显示的却是底下的li的情况。

问题描述 css3多列设置ul中的li两列显示,但出现的问题是点击其中的li,实际显示的却是底下的li的情况. 设置webkit-column-count:2原来设置float的时候没有出现这种情况. 如图 明明点击的是第一个,但显示的确实下边一个. 在实际运行中总是点错. 不知该怎么解决

css ie6、ie7、ie8中overflow:hidden无效解决办法

产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决办法: 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div 后来在外层div上面加上position:rel

全面阐述overflow:hidden属性

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于"浮动"这个词到底包含什么样的含义呢?我们下面来详

overflow:hidden的详细解释

  overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于"浮动"这个词到底包含什么样的含义呢?我们下面来详细的阐述一下. 这是一个常用的div写法,下面我们来书写样式.大家可以在DMX中自己做试验 #box{ width:500px; background:#000;

jQuery实现为LI列表前3行设置样式的方法【2种方法】_jquery

本文实例讲述了jQuery实现为LI列表前3行设置样式的方法.分享给大家供大家参考,具体如下: 在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列表的前3行加上不同的样式,例如给LI文章列表的前3行文字颜色设置红色,再例如图片列表的时候设置列表第一张图片.第二张图片等的宽和高,都可以用蓝叶分享的这两种方法为LI列表设置样式:对于懂PHP语言的设计者来说,很容易就可以实现的效果,对于不懂PHP语言的可以使用这两种方法也很轻松的实现自己想要的各种效果. <!DOCT

border-radius 应用了 transform 的子元素 overflow:hidden 失败如何解决

在一个应用了 border-radius 的圆角元素上,加上 overflow:hidden.子元素铺满.对于子元素超出圆角的部分可以被隐藏掉.形成一个圆角头像容器的结构.代码如下: HTML <div id="wrapper">     <div id="box"></div> </div> CSS #wrapper {     position: absolute;     width: 200px;     he