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

2020-05-07 06:17:01易采站长站整理

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元素从新行开始;