CSS list-style-position 属性
实例
规定列表中列表项目标记的位置:
ul
{
list-style-position:inside;
}
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
所有浏览器都支持 list-style-position 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
list-style-position 属性设置在何处放置列表项标记。
说明
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
默认值: | outside |
---|---|
继承性: | yes |
--- | --- |
版本: | CSS1 |
--- | --- |
JavaScript 语法: | object.style.listStylePosition="inside" |
--- | --- |
可能的值
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
TIY 实例
本例演示在何处放置列表标记。
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside":</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside":</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>
相关页面
CSS 教程:CSS 列表
CSS 参考手册:CSS list-style 属性
HTML DOM 参考手册:listStylePosition 属性