很多时候我们都需要多对列表元素进行初始化，方法是给列表元素添加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>

虽然可以去掉前面的符号，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>

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

over

list-style-type:none是加在ul还是li中呢？的更多相关文章

  1. ul、li中的DIV垂直居中

    当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...

  2. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  3. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  4. [HTML]去除li前面的小黑点,和ul、LI部分属性

    [转] 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.[HTML]去除li前面的小黑点,和ul.LI部分 ...

  5. [HTML]去除li前面的小黑点,和ul、LI部分属性[转]

    转摘自:http://blog.csdn.net/cqkxzyi/article/details/7606181 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很 ...

  6. Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和. ...

  7. ul、li分列显示

    目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示. 方法1,使用DIV+CSS代码: <style type="text/css"> .my ...

  8. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  9. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

随机推荐

  1. 如何低成本搭建dnslog服务器

    DNSLog,简单来说,就是通过记录对于域名的DNS请求,通过dns请求这个相对"隐蔽"的渠道,来委婉地获取到想要获得的信息. 例如,在一个针对mysql数据库的注入中,如果没有回 ...

  2. Windows 刷新系统图标缓存

    rem 关闭Windows外壳程序explorer taskkill /f /im explorer.exe rem 清理系统图标缓存数据库 attrib -h -s -r "%userpr ...

  3. 题解 [BZOJ1925][SDOI2010] 地精部落

    题面 解析 这个似乎并不好讲啊 设\(f[i][j]\)表示有\(i\)座山, 最后一座山到达高度是\(i\)座中第\(j\)大的, 且最后一座山是山谷. 注意,\(i\)是代表有\(i\)座山,并不 ...

  4. 分布式协调框架_Zookeeper

    Zookeeper 如今在分布式架构中应用十分广泛,它作为分布式协调框架在分布式架构中有着举足轻重的地位,本文是主要从以上几个方面对 Zookeeper 常用的知识进行总结. 一 从集中式到分布式架构 ...

  5. Vivado添加coe文件

    直接将.txt文件的后缀改为.coe,并在文件的开头添加如下两行代码即可: memory_initialization_radix=10; memory_initialization_vector=

  6. 微软企业库Unity依赖注入

    Unity Application Block 1.0系列(4): 方法调用注入(Method Call Injection ) http://www.cnblogs.com/inrie/archiv ...

  7. CKEditor从word粘贴问题

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  8. 2019 南昌ICPC网络赛H The Nth Item

    The Nth Iteam 题意:F(0)=1,F(1)=1,F(n)=3*F(n-1)+2*F(n-2) (n>=2) ,F(n) mod 998244353.给出Q跟N1,Ni=Ni-1^( ...

  9. 深入理解Java的三大特性之多态

    世界上最美丽的东西,看不见也摸不着,要靠心灵去感受. ——海伦·凯勒 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响类使用的情况下改变类的内部结构,并保护数据.对 ...

  10. CISCN final 几道web题总结

    因为都有源码,所以这里直接从源码开始分析: 1.Easy web 这道题本来的意思应该是通过注入来load_file读取config.php来泄露cookie的加密密钥,从而伪造身份进行登陆再上传sh ...