在 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
沒有留言:
張貼留言