今天小编跟大家讲解下有关CSS: list-style 和 inline使用方法详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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 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% 除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul>和<li>是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高 行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度 不可改变。 <span>, <a>, <label>, <input>, <img>, <strong>和<em>是inline元素的例子。 inline和block可以控制一个元素的行宽高等特性 需要切换的情况如下： 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 display:inline-block将对象呈递为内联对象 但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 允许空格。 inline-block的元素特点： 将对象呈递为内联对象 但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 允许空格。(准确地说 应用此特性的元素呈现为内联对象 周围元素保持在同一行 但可以设置宽度和高度地块元素的属性) 并不是所有浏览器都支持此属性 目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block IE是不识别的 但使用display:inline-block在IE下会触发layout 从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析 也不难理解为什么IE下 对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout 而它本就是行布局 所以触发后 块元素依然还是行布局 而不会如Opera中块元素呈递为内联对象。 IE下块元素如何实现display:inline-block的效果 有两种方法： 1、先使用display:inline-block属性触发块元素 然后再定义display:inline 让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果 这是IE的一个经典bug 如果先定义了display:inline-block 然后再将display设回inline或block layout不会消失）。代码如下（...为省略的其他属性内容）： div {display:inline-block;...} div {display:inline;} 2、直接让块元素设置为内联对象呈递（设置属性display:inline） 然后触发块元素的layout（如：zoom:1等）。代码如下： div {display:inline; zoom:1;} CSS white-space 属性 定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。 normalyesCSS1object.style.whiteSpace="pre"实例 规定段落中的文本不进行换行： p { white-space: nowrap } 浏览器支持 所有浏览器都支持 white-space 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 可能的值 normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行 文本会在在同一行上继续 直到遇到 <br> 标签为止。pre-wrap保留空白符序列 但是正常地进行换行。pre-line合并空白符序列 但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。来源：爱蒂网
