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

    counter = 100 # 整型变量 miles = 1000.0 # 浮点型变量 name = "runoob" # 字符串 print(counter) print(mil ...

  2. C# ado.net oledb方式连接(三)

    oledb 方式连接 class Program { private static string constr = "server=.;database=northwnd;integrate ...

  3. 立即执行函数与For. . .in语句

    ㈠立即执行函数 ⑴定义:在函数定义完,立即被调用,这样的函数叫做立即执行函数 ⑵语法:函数对象() ⑶注意:立即执行函数往往只会执行一次 ⑷示例1: (function(){ alert(" ...

  4. 逆向bfs搜索打表+康拓判重

    HDU 1043八数码问题 八数码,就是1~8加上一个空格的九宫格,这道题以及这个游戏的目标就是把九宫格还原到从左到右从上到下是1~8然后最后是空格. 没了解康托展开之前,这道题怎么想都觉得很棘手,直 ...

  5. 2019.6.20 校内测试 NOIP模拟 Day 1 分析+题解

    这次是zay神仙给我们出的NOIP模拟题,不得不说好难啊QwQ,又倒数了~ T1 大美江湖 这个题是一个简单的模拟题.   ----zay 唯一的坑点就是打怪的时候计算向上取整时,如果用ceil函数一 ...

  6. 微信内置浏览器不支持APK附件下载的原因

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...

  7. 【java设计模式】-07适配器模式

    适配器模式 定义: 将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 类型: 结构型模式 应用实例: 1.JAVA JDK 1.1 提供 ...

  8. pytorch-mnist神经网络训练

    在net.py里面构造网络,网络的结构为输入为28*28,第一层隐藏层的输出为300, 第二层输出的输出为100, 最后一层的输出层为10, net.py import torch from torc ...

  9. mysql 首次安装后 简单操作与语句 新手入门

    首先cd到安装目录中bin路径:这是我的安装路径以管理员身份打开cmd(防止权限不足)cd E:\>cd E:\mysql\mysql-5.5.40-winx64\bin 首次安装需要输入 my ...

  10. CNN基础框架简介

    卷积神经网络简介 卷积神经网络是多层感知机的变种,由生物学家休博尔和维瑟尔在早期关于猫视觉皮层的研究发展而来.视觉皮层的细胞存在一个复杂的构造,这些细胞对视觉输入空间的子区域非常敏感,我们称之为感受野 ...