list-style-position的inside 与outside的区别

最新推荐文章于 2023-05-31 15:02:41 发布

wkj001

最新推荐文章于 2023-05-31 15:02:41 发布

阅读量7k

点赞数 4

分类专栏： html

本文链接：https://blog.csdn.net/wkj001/article/details/48106137

版权

html 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<html>
<head>
<style type="text/css">
ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside;
}
ul li { border:1px solid red;}
</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>

</pre><pre name="code" class="html">

效果区别：

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。