本文通过两个实例展示了如何使用CSS的list-style-position属性来调整无序列表项目符号的位置，包括将其放置于列表项内部（inside）及外部（outside）。这对于网页布局和美化非常有用。
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>
该列表的 list-style-position 的值是 "inside"：
- Earl Grey Tea - 一种黑颜色的茶
- Jasmine Tea - 一种神奇的“全功能”茶
- Honeybush Tea - 一种令人愉快的果味茶
该列表的 list-style-position 的值是 "outside"：
- Earl Grey Tea - 一种黑颜色的茶
- Jasmine Tea - 一种神奇的“全功能”茶
- Honeybush Tea - 一种令人愉快的果味茶
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
