w3cschool关于list-style-position时的另外发现

首先list-style-position有inside和outside、、。

另外发现:设置inline-block时 那个圆点消失了。。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul.inside
        {
            list-style-position: inside
        }

        ul.outside
        {
            list-style-position: outside
        }
        .inline-block li{display: inline-block;}
    </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>

<p>该列表的样式是inline-block list-style消失了:</p>
<ul class="inline-block">
    <li>Earl Grey Tea - 一种黑颜色的茶</li>
    <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
    <li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>
原文地址:https://www.cnblogs.com/tom-chang/p/3653249.html