网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2025/1/9 浏览:3 次 )
实际上用了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 :  列表项目标记放置在文本以内,且围绕文本根据标记对齐
上一篇:css控制字间距和对齐方式及其所用属性介绍
下一篇:CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。