list-style-type:none是加在ul还是li中呢？

程序员文章站 2021-12-07 08:20:20

关于初始化列表元素时list-style-type:none是加在ul还是li中引发的一点思考 ......

很多时候我们都需要多对列表元素进行初始化，方法是给列表元素添加list-style-type: none，但作为小白的我是经常纠结一个问题：是把它加在ul中还是li中呢

我试了一下，加在ul和li都能达到同样的效果，如下

把list-style-type: none加在li上：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端小王子</title>
    <style>
        /*reset*/
        body{
            margin: 0;
        }
        ul{
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
        }
        li{
            list-style-type: none;
        }
        
        /*list*/
        .list{
            width: 125px;
            margin: 50px auto;
            background-color: #e8e8e8;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>放假了</li>
        <li>买个地球仪吧</li>
        <li>世界那么大</li>
        <li>你不但可以看看</li>
        <li>还可以转转</li>
    </ul>
</body>
</html>

list-style-type:none是加在ul还是li中呢？

虽然可以去掉前面的符号，li的list-style-type也为none，但是ul的list-style-type仍然是disc，和我们的所希望的不符，也和w3c标准不太符合，先来看看ul的缺省值

display: block;
list-style-type: disc;
margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;
padding-left: 40px;

再看li的

display: list-item;

这下便一目了然了-应该把list-style-type: none加在ul中，看效果：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端小王子</title>
    <style>
        /*reset*/
        body{
            margin: 0;
        }
        ul{
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
            list-style-type: none;
        }

        /*list*/
        .list{
            width: 125px;
            margin: 50px auto;
            background-color: #e8e8e8;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>放假了</li>
        <li>买个地球仪吧</li>
        <li>世界那么大</li>
        <li>你不但可以看看</li>
        <li>还可以转转</li>
    </ul>
</body>
</html>

list-style-type:none是加在ul还是li中呢？

li从ul中继承过来list-style-type后，ul和li的list-style-type值便都为none了

over

上一篇： canvas、svg、canvas与svg的区别

下一篇： Html5+js实现俄罗斯方块