在Wordpress写文章的时候，发现列表项的数字总是在DIV标签的外面，如下所示
- 用户界面
- 视图导航
- 视图设置
HTML的源代码如下：
|
1 2 3 4 5 6 7 |
<div style="background-color: #f9f9f9; border: 1px"> <ol style="padding-bottom: 2px; margin-bottom: 2px; padding-top: 2px;"> <li>用户界面</li> <li>视图导航</li> <li>视图设置</li> </ol> </div> |
这种情况是非常不美观的，尤其是当DIV设置了背景色的时候。
网上查询了一下，发现list-style-position:inside是用来调整这种情况的。
语法：
取值：
说明：
设置或检索作为对象的列表项标记如何根据文本排列。
假如一个列表项目的左外补丁(
仅作用于具有
注意：
此属性对于
对应的脚本特性为
list-style-position : outside |inside取值：
outside :默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐inside :列表项目标记放置在文本以内，且环绕文本根据标记对齐说明：
设置或检索作为对象的列表项标记如何根据文本排列。
假如一个列表项目的左外补丁(
margin-left)被设置为 0 ，则列表项目标记不会被显示。左外补丁(margin-left)最小可以被设置为 30。仅作用于具有
display属性值等于list-item的对象。如li对象。注意：
ol对象和ul对象的type属性为其后的所有列表项目(如 li对象)指明列表属性。此属性对于
currentStyle对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为
listStylePosition。
因此修改上面的代码如下：
|
1 2 3 4 5 6 7 |
<div style="background-color: #f9f9f9; border: 1px ;font-size: small"> <ol style="padding-bottom: 2px; margin-bottom: 2px; padding-top: 2px;list-style-position:inside"> <li>用户界面</li> <li>视图导航</li> <li>视图设置</li> </ol> </div> |
修改后的效果如下：
- 用户界面
- 视图导航
- 视图设置