企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 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 实例 [放置列表标记](/tiy/t.asp?f=csse_list-style-position) 本例演示在何处放置列表标记。 ``` <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.asp "CSS 列表") CSS 参考手册:[CSS list-style 属性](/cssref/pr_list-style.asp "CSS list-style 属性") HTML DOM 参考手册:[listStylePosition 属性](/jsref/prop_style_liststyleposition.asp "HTML DOM listStylePosition 属性")