w3cschool關於list-style-position時的另外發現

時間 2020-07-07

標籤 w3cschool cschool 關於 list style position 另外發現欄目 CSS 简体版

原文原文鏈接

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

另外發現：設置inline-block時那個圓點消失了。。ide

<!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>

相關標籤/搜索