免責聲明

Disclaimer (免責聲明)
繼續閱覽代表您接受以上的免責聲明.
To continue reading means you accept the above disclaimer.

2011年1月2日 星期日

CSS list-style 沒作用?

在 Blogspot http://3hinvest.blogspot.com
改變sidebar的ul(unordered list) style,
加入了以下的CSS

.sidebar ul {
margin:5px;
list-style:disc;
}

雖然條列項目有內縮 但是項目的"子彈"(bullet, 項目前的標誌小圖)
卻沒顯示出來 , 即使再加入

.sidebar ul li {
list-style:disc;
}
依然沒顯示出bullet

上網搜尋 發現了 list-style 這個屬性有好多個值
'list-style'
[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

其中'list-style-position' 的預設值是 outside ?
只要指定'list-style-position' 為inside, bullet 就會出現了

[example]
ul
{
list-style:disc inside url("/images/blueball.gif");
}

//===
tried to make bullet for ul(unordered list) shown on my another blog, http://3hinvest.blogspot.com
by modifying the blogspot template to

.sidebar ul {
margin:5px;
list-style:disc;
}

the indent takes effect, but the bullets do not show up even if
i added

.sidebar ul li {
list-style:disc;
}

after searching on internet, found that
the value of property 'list-style' has multiple ingredients
that can be set in order: list-style-type, list-style-position, list-style-image.

'list-style'
[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit


If one of the values above is missing, e.g. "list-style:disc inside;", the default value for the missing property will be adopted.

The default value for 'list-style-position' seems outside?
After explicitly setting 'list-style-position' to 'inside' as follows

.sidebar ul {
margin:5px;
list-style:disc inside;
}

the bullets show up as expected.



[ref]
http://www.w3.org/TR/CSS2/propidx.html

沒有留言:

張貼留言