CSS: list-style 和 inline使用方法详解

平时只顾着写程序，写 div 或 span 或 ul li 之类的，常常遇到一莫名的问题，自己的解决方式可能是 top: -10px 也可能 float:left 之类的，问题当然能得到解决，就好像坐轮船到纽约和坐飞机到纽约的结果一样，都是到了纽约，只是方式不同而已，相比之下，飞机更快，更便捷. 自己选择吧!

display:inline;
list-style:none outside none;
white-space:nowrap

首先看下 list-style 的用法：

我以前只用到 list-style:none; 这种方式，原以为也只这种方式呢，这个方式只不过是让 li 前的标记去掉而已 !

事实上 list-style 可分为三个属性: list-style-type list-style-position list-style-image

看下w3c 的说法:

定义和用法

list-style 简写属性在一个声明中设置所有的列表属性。

说明

该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

可以按顺序设置如下属性：

list-style-type

list-style-position

list-style-image

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

disc outside noneyesCSS1object.style.listStyle="decimal inside"

实例

把图像设置为列表中的列表项目标记：

ul { list-style:square inside url(‘/i/arrow.gif’); }

浏览器支持

所有浏览器都支持 list-style 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

CSS list-style-type 属性

定义和用法

list-style-type 属性设置列表项标记的类型。
discyesCSS1object.style.listStyleType="square"实例

设置不同的列表样式：

ul.circle {list-style-type:circle;} ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;} ol.lower-alpha {list-style-type:lower-alpha;}

浏览器支持

所有浏览器都支持 list-style-type 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"。
可能的值CSS2 的值： none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman大写罗马数字(I, II, III, IV, V, 等。)lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)lower-greek小写希腊字母(alpha, beta, gamma, 等。)lower-latin小写拉丁字母(a, b, c, d, e, 等。)upper-latin大写拉丁字母(A, B, C, D, E, 等。)hebrew传统的希伯来编号方式armenian传统的亚美尼亚编号方式georgian传统的乔治亚编号方式(an, ban, gan, 等。)cjk-ideographic简单的表意数字hiragana标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）katakana标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）CSS2.1 的值：disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit