24.3　设置列表的文本排列

复合属性的第二个参数是设置列表的文字排列，即表示对象的列表项标记如何根据文本排列。

/CSS样式：设置列表文本排列/

list-style-position：outside|inside

列表的文本排列表示列表的表项是否在表项范围内显示，参数值设置有outside和inside，下面对这两个参数值进行说明。

❑参数outside：默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

❑参数inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

下面用实例来演示列表的文本排列。在HTML标记中，用ul设置无序排列以及其表项中设置不同的内容，当用关联样式设置list-style-position时，在网页中就可表现出文本排列的效果，如代码24.3所示。

代码24.3　源代码\第24章\设置列表文本排列.html

—————————————文件名：设置列表文本排列.html—————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞设置列表文本排列＜/title＞

04 ＜style type="text/css"＞

05 #i1

06 {

07 /设置为默认的文本排列/

08 border：1px solid red；

09 }

10 #ii2

11 {

12 /设置文本内包含表项标记/

13 list-style-position：outside；

14 }

15 #ii3

16 {

17 /设置表项标记在文本外/

18 list-style-position：inside；

19 }

20 ＜/style＞

21 ＜/head＞

22 ＜body＞

23 ＜div id="i1"＞

24 ＜！-设置列表为无序列表d—＞

25 ＜ul＞

26 ＜li id="ii1"＞列表标记在文本以外，默认值outside＜/li＞

27 ＜li id="ii2"＞列表标记在文本以内，设置值为inside＜/li＞

28 ＜li id="ii3"＞列表标记在文本以内，设置值为inside＜/li＞

29 ＜/ul＞

30 ＜/div＞

31 ＜/body＞

32 ＜/html＞

【代码解析】在HTML中用无序列表表示了3个不同的表项。当设置文本排列时，代码第26行是第一个表项，为默认值；代码第44行为第二个表项，设置list-style-position为outside，效果与表项一相同；但表项三，在代码第7行设置list-style-position的参数值为inside，表示在文本内显示表项标记，效果如图24.3所示。

图　24.3　设置列表文本排列