©
本文档使用
php中文网手册 发布
list-style-position:outside | inside
默认值:outside
适用于:所有 <' display '> 设置为list-item的元素
继承性:有
动画性:否
计算值:特定值
outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
仅作用于具有 <' display '> 值等于list-item的对象(如li对象)。
注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
对应的脚本特性为listStylePosition。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>list-style-position_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.outside{width:120px;list-style-position:outside;}
.inside{width:120px;list-style-position:inside;}
</style>
</head>
<body>
<h1>outside的项目符号:</h1>
<ul class="outside">
<li>项目符号的位置是outside</li>
<li>项目符号的位置是outside</li>
<li>项目符号的位置是outside</li>
</ul>
<h1>inside的项目符号:</h1>
<ul class="inside">
<li>项目符号的位置是inside</li>
<li>项目符号的位置是inside</li>
<li>项目符号的位置是inside</li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例