zoukankan html css js c++ java

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>

查看全文

相关阅读:
删除 AP 发票相关脚本
 js框架简明
 16 款最流行的 JavaScript 框架
 八款你不得不知的开源前端JS框架
 ExtJS面向对象
 js6类和对象
 js模拟类
 js实现继承
 Html中各种空格的显示
 常用快速原型设计工具大比拼、原型设计工具哪个好用

原文地址：https://www.cnblogs.com/tom-chang/p/3653249.html