如何使用 CSS 指示标记应出现在包含项目符号的框内还是框外?
javascriptweb developmentfront end scripts
list-style-position 属性指示标记应出现在包含项目符号的框内还是框外。它可以有两个值之一
| 值 | 描述 |
|---|---|
| 无 | NA |
| 内部 | 如果文本进入第二行，文本将在标记下方换行。如果列表的值为 outside，它还会缩进到文本开始的位置。 |
| outside | 如果文本进入第二行，文本将与第一行的开头对齐(在项目符号的右侧)。 |
示例
您可以尝试运行以下代码来实现 list-style-position 属性
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ul> <ul style = "list-style-type:square;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ul> <ol style = "list-style-type:decimal;list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ol> <ol style = "list-style-type:lower-alpha;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ol> </body> </html>
