CSS列表属性list-style-type和list-style-position怎么用

CSS中的list-style-type和list-style-position是控制列表样式的两大核心属性，前者决定列表项前标记的类型，后者决定标记相对于列表项内容的位置，二者配合可以实现多样的列表展示效果。

list-style-type属性详解

list-style-type用于设置列表项前面的标记形状或编号类型，适用于ul、ol以及li元素，常见取值如下：

• disc：实心圆点，是ul元素的默认值
• circle：空心圆点
• square：实心方块
• decimal：十进制数字，是ol元素的默认值
• lower-roman：小写罗马数字，如i、ii、iii
• upper-roman：大写罗马数字，如I、II、III
• none：不显示任何标记

下面的代码展示了不同list-style-type取值的渲染效果：

/* 无序列表不同标记类型 */
ul.type-disc {
    list-style-type: disc;
}
ul.type-circle {
    list-style-type: circle;
}
ul.type-square {
    list-style-type: square;
}
ul.type-none {
    list-style-type: none;
}

/* 有序列表不同标记类型 */
ol.type-decimal {
    list-style-type: decimal;
}
ol.type-lower-roman {
    list-style-type: lower-roman;
}
ol.type-upper-roman {
    list-style-type: upper-roman;
}

<ul class="type-disc">
    <li>实心圆点列表项1</li>
    <li>实心圆点列表项2</li>
</ul>
<ul class="type-circle">
    <li>空心圆点列表项1</li>
    <li>空心圆点列表项2</li>
</ul>
<ol class="type-decimal">
    <li>数字列表项1</li>
    <li>数字列表项2</li>
</ol>
<ol class="type-lower-roman">
    <li>小写罗马数字列表项1</li>
    <li>小写罗马数字列表项2</li>
</ol>

list-style-position属性详解

list-style-position用于设置列表标记相对于列表项内容区域的位置，只有两个可选取值：

• outside：标记位于列表项内容区域的外部，是默认值。此时标记会显示在列表项的内边距区域，不会占用内容区域的宽度。
• inside：标记位于列表项内容区域的内部，标记会作为列表项内容的第一个字符，会占用内容区域的宽度，列表项内容换行时会在标记下方对齐。

以下代码对比两种取值的差异：

ul.position-outside {
    list-style-position: outside;
    width: 200px;
    border: 1px solid #ccc;
}
ul.position-inside {
    list-style-position: inside;
    width: 200px;
    border: 1px solid #ccc;
}

<ul class="position-outside">
    <li>这是outside位置的列表项，内容比较长会换行显示，换行后的内容会和第一行内容左对齐</li>
</ul>
<ul class="position-inside">
    <li>这是inside位置的列表项，内容比较长会换行显示，换行后的内容会在标记下方对齐</li>
</ul>

两个属性的组合使用

实际开发中通常会将两个属性结合使用，也可以使用简写属性list-style同时设置标记类型和位置，简写属性的格式为list-style: list-style-type list-style-position，如果不需要设置某个值可以省略。

常见的组合使用场景示例：

/* 自定义有序列表，使用小写罗马数字标记，标记放在内容内部 */
ol.custom-list {
    list-style: lower-roman inside;
    /* 等价于分别设置以下两个属性 */
    /* list-style-type: lower-roman; */
    /* list-style-position: inside; */
}

/* 自定义无序列表，使用实心方块标记，标记放在内容外部 */
ul.custom-list {
    list-style: square outside;
}

注意事项

• list-style-type和list-style-position都是可继承属性，设置在ul或ol上的属性会被所有子li元素继承。
• 如果列表的list-style-type设置为none，即使list-style-position设置了值也不会显示标记。
• 当列表项的display属性设置为inline或inline-block时，list-style相关属性会失效，因为内联元素不支持列表标记。

CSSlist-style-typelist-style-position列表样式修改时间：2026-06-13 20:45:21