很多时候我们都需要多对列表元素进行初始化，方法是给列表元素添加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. 莫比乌斯函数介绍&&基础

    定义 设正整数$N$按照算术基本定理分解质因数为$N=p_1^{c_1}p_2^{c_2} \cdots P_m^{c_m}$,定义函数: $$\mu(N)= \left\{\begin{matrix ...

  2. BZOJ 1453 （线段树+并查集）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1453 题意:一个 n*n 的矩阵,每个位置有黑/白两种颜色,有 m 次操作,每次可以翻转 ...

  3. PHP mysqli_get_connection_stats() 函数

    定义和用法 mysqli_get_connection_stats() 函数返回有关客户端连接的统计. 语法 mysqli_get_connection_stats(connection); 返回有关 ...

  4. 收藏一个RMQ模板

    int a[1100]; int dp[maxn][20]; void rmq_init(){ for(int i=0;i<n;i++) dp[i][0]=a[i]; for(int j=1;( ...

  5. O(1)快速乘与O(log)快速乘

    //O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){     x=x%MOD,y=y%MOD;     return ((x*y-(LL)(((long d ...

  6. CSP-S 模拟测试 51 题解

    考试过程: 惯例先看一遍三道题,T1 一开始反应要求割点,但是这是有向图,肯定不能求割点,康了一下数据范围,有40%是树的,还不错,决定待会在打. 看T2 字符串题,完了我字符串最弱了,肯定只能打暴力 ...

  7. MySQL 5.7半同步复制技术

    一.复制架构衍生史 在谈这个特性之前,我们先来看看MySQL的复制架构衍生史. 在2000年,MySQL 3.23.15版本引入了Replication.Replication作为一种准实时同步方式, ...

  8. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  9. mybatis 对string类型判断比较 group case when then 综合

    [quote] 特别注意两点 一个是where 的用法group的用法 case when的用法 <if test='hasLoanApplicationFlag == "1" ...

  10. pl/sql Developer连接oracle远程数据库

    1.下载地址:PLSQL Developer 12.1正式版64位(含中文语言包.注册码).rar   https://download.csdn.net/download/bokewangyu/11 ...