很多时候我们都需要多对列表元素进行初始化，方法是给列表元素添加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. idea tomcat服务器运行打印日志到控制台是乱码解决方案

    1.试过网上很多方面,给启动的时候加参数,什么-Dfile.encoding=utf8等等都没用. 2.最后是修改了tomcat-conf-logger.properties中的 我的一开始utf-8 ...

  2. boost 函数与回调

    result_of 含义:result_of可以帮助程序员确定一个调用表达式的返回类型,主要用于泛型编程和其他boost库组件,它已经被纳入TR1 头文件:<boost/utility/resu ...

  3. 关于shell输出的一些问题

    有时候在调试程序中需要将打印到屏幕上的信息保存中,一般情况下可以使用 >fileName,应该注意到有些情况下程序可能会在标准错误输出中输出这些内容,这时需要时 progam 2>1.tx ...

  4. Android项目实战登录&注册

    由于项目中大部分界面都有一个后退键和一个标题栏,为避免代码冗杂以及便于利用,我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局,在 res/layout 目录下新建一个 Layout resour ...

  5. springboot(七).springboot整合jedis实现redis缓存

    我们在使用springboot搭建微服务的时候,在很多时候还是需要redis的高速缓存来缓存一些数据,存储一些高频率访问的数据,如果直接使用redis的话又比较麻烦,在这里,我们使用jedis来实现r ...

  6. Java中String、StringBuffer、StringBuilder

    String 对象 String 创建机制 String 是 Java 语言中非常基础和重要的类,提供了构造和管理字符串的各种基本逻辑,由源码可知,它是典型的 Immutable (不可变)类,被fi ...

  7. 创建express项目（nodejs）

    1.下载nodejs安装包 nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 2.配置环境 最 ...

  8. RxJava（一）：响应式编程与Rx

    一,响应式编程 响应式编程是一种关注于数据流(data streams)和变化传递(propagation of change)的异步编程方式. 1.1 异步编程 传统的编程方式是顺序执行的,必须在完 ...

  9. web工程中添加自建userLibary与将jar包放到lib文件夹下的区别

    纯 java项目 使用的本地自己的JRE,那么classLoader在加载jar和class时候是分开的,对于我们自己编写的class,会在 APP_HOME/bin下.导入的jar包或者user l ...

  10. CISCO实验记录一：路由器基本配置

    一.路由器基本配置要求 1.设置路由器名为:hehe 2.设置特权模式下password为ccna,secret为ccnp,vty线路密码为ccie 3.所有明文密码都加密 二.路由器基本配置命令 1 ...