以前只用到 list-style:none; 这种方式,原以为也只这种方式呢,这个方式只不过是让 li 前的标记去掉而已,下面为大家介绍下CSS: list-style 和 inline 用法详解,感兴趣的朋友不要错过平时只顾着写程序,写 p 或 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
CSS list-style-position 属性
定义和用法
list-style-position 属性设置在何处放置列表项标记。
说明
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
outsideyesCSS1object.style.listStylePosition="inside"实例
规定列表中列表项目标记的位置:
ul { list-style-position:inside; }
浏览器支持
所有浏览器都支持 list-style-position 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值 inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。inherit规定应该从父元素继承 list-style-position 属性的值。
CSS list-style-image 属性
定义和用法
list-style-image 属性使用图像来替换列表项的标记。
说明
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
注释:请始终规定一个 "list-style-type" 属性以防图像不可用。
noneyesCSS1object.style.listStyleImage="url('/images/blueball.gif')"实例
把图像设置为列表中的项目标记:
ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }
浏览器支持
所有浏览器都支持 list-style-image 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值 URL图像的路径。none默认。无图形被显示。inherit规定应该从父元素继承 list-style-image 属性的值。
二. inline 的说明 :
display:block就是将元素显示为块级元素.
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
,
,