1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > overflow:hidden导致ul li前缀点消失(隐藏)的解决方法 – CSS – 前端 css 浏览器滚动条样式

overflow:hidden导致ul li前缀点消失(隐藏)的解决方法 – CSS – 前端 css 浏览器滚动条样式

时间:2021-07-25 16:39:46

相关推荐

overflow:hidden导致ul li前缀点消失(隐藏)的解决方法 – CSS – 前端 css 浏览器滚动条样式

可能很多人喜欢使用ul li自带的前缀点作为前缀图标,而不是使用背景图片的方式,这样省去了做图也能为网页提速,特别是各种标题中使用 ul li的前缀点!

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

但同时,标题因为长度不一,所以不得不使用overflow:hidden隐藏换行,但此时ul li的前缀点就消失不见了,使用位移调整失效!

那么如何解决overflow:hidden导致ul li前缀点消失的问题呢?

方法一、不使用overflow:hidden,li不要设置高度,让其自由换行(这个。。。可能真的不太符合)

方法二、在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 : 列表项目标记放置在文本以内,且围绕文本根据标记对齐

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。