css樣式li不顯示的原因

2021-10-21 17:34:27 字數 1021 閱讀 5869

用了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 :  列表專案標記放置在文字以內,且圍繞文字根據標記對齊

Div border 不顯示的原因

div style border 10px border style solid height 100px width 200px margin auto color rgb 0,255,214 background color rgb 14,196,241 div 顯示如下 其中 border s...

element ui樣式不顯示

完整引入 在 main.js 中寫入以下內容 vue.use elementui 一定不能忘記這一步,如果沒有這一步,element ui引入成功後樣式會顯示不出來。按需引入 借助 babel plugin component,我們可以只引入需要的元件,以達到減小專案體積的目的。首先,安裝 babe...

用CSS定義 li 樣式

li li的這個樣式定義是將列表專案使用來代替顯示的小圓點。當然您也可以顯示成其它效果,詳細請參閱下面的定義 列表專案效果的css定義 list style type circle 可換成自己想要的樣式 列表專案樣式 disc css1 實心圓 circle css1 空心圓 square css1...