在 CSS 中更改列表标记的位置

cssweb developmentfront end technology更新于 2025/1/6 14:36:17

CSS 的 list-style-position 属性用于设置列表项的标记位置。此属性的默认值为 outside，即标记位于列表项之外。

语法

CSS list-style-position 属性的语法如下 −

Selector {
   list-style-position: /*value*/
}

示例

以下示例演示了 CSS list-style-property −

<!DOCTYPE html>
<html>
<head>
<style>
li {
   width: 50%;
   margin: 5px;
   font-size: 120%;
   box-shadow: 0 0 3px 1px black;
   background: url("https://www.cainiaomax.com/dbms/images/dbms.jpg") no-repeat 32px 8px;
   list-style-position: inside;
   padding: 0 0 10px 20px;
}
ol ol li {
   list-style: lower-roman;
   list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>Black</li>
<li>
Blue
<ol>
<li>Green</li>
<li>Red</li>
</ol>
</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   width: 200px;
   box-shadow: inset 0 0 6px green;
   list-style-position: outside;
}
ul + ul {
   list-style-type: circle;
   list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>