CSS List

List

CSS list 性质允许你对有序列表和无序列表设置不同的 list item marker（列表项目的标记），你也可以把一个图片设为列表项目的标记。

List item marker

The type of list item marker is specified with the list-style-type property

该性质设定列表项目标记的样式。

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

注意：该性质是设定在 <ul> 和 <ol> 这两个元素上的，而不是<li>

An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property.

使用该性质设定图片为列表元素的标号。

ul{list-style-image: url('sqpurple.gif');}

注意：The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.

上面的例子中图片标号在 IE 和 Opera 浏览器中比 FF、Chrome 和 Safari 中显示的位置要略高一些。下面给出跨浏览器解决办法。

Crossbrowser solution

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center; 
padding-left: 15px; 
}

Shorthand property

可以把所有list的性质写在一个缩写性质里来实现。The shorthand property used for lists, is the list-style property.

属性值的书写顺序

• list-style-type
• list-style-position (使用方式见补充部分)
• list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified order.

如果上述属性有一个没有用到也不要紧，只要余下的属性是按照这个顺序书写的就可以。

补充：

The list-style-position property specifies if the list-item markers should appearinside oroutside the content flow.

该性质设定列表元素标号是出现在内容里边还是外边。

Outside:

• Coffee
• Tea
• Coca-cola

Inside:

• Coffee
• Tea
• Coca-cola