Home > Article > Web Front-end > In-depth understanding of list-style in CSS

In-depth understanding of list-style in CSS

黄舟Original: 2017-06-29 09:25:552868browse

First look at the explanation of list-style in the CSS manual

Definition and usage
The list-style shorthand attribute sets all list attributes in one statement.

Description
This attribute is a shorthand attribute that covers all other list style attributes. Since it applies to all elements with display list-item, it can only be used on li elements in normal HTML and XHTML, but in fact it can be applied to any element and is inherited by list-item elements.
You can set the following properties in order:
•list-style-type
•list-style-position
•list-style -image
You can not set one of the values. For example, "list-style:circle inside;" is also allowed. Properties that are not set use their default values.
Default value: disc outside none

In daily work, it is often necessary to perform css reset on ul and li to hide the list symbols.
The most commonly used way of writing is Ul, li,ol{list-style:none;}(Some people also use ul,li,ol{list-style-type:none;})

Run code box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>常见的用法</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

This page is at There are no problems in IE6, 7, 8, and FF.

But what we cannot ignore is that list-style: contains three attributes:

list-style-type
list -style-position
list-style-img

If you don’t pay attention to these three attributes, list-style will sometimes cause trouble

For example, when ul is floated, it needs to When using display:inline to solve the double margin problem in IE6, something strange happened:

Run code box

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>奇怪的事情发生了</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

The above page is still normal in IE8 and ff
But in IE6 and 7, there is a distance between the inside of ul and li .
It can be seen that when we define list-style:none, although the list symbol does not appear, it still has its place in IE6 and 7.
Look at this UL in FF What attributes does it have?

In-depth understanding of list-style in CSS

As can be seen in the picture, when list-style:none is defined in css, it has no effect on list-style-position and is still in FF browser. The default setting is outside
. In IE6 and 7, the default is likely list-style-position: inside
. To confirm this, I changed list-style:none to list-style:none inside none and then tested again. After a while

Run the code box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>强制inside</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
<p>强制inside list-style:none inside none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

After running it, you can find that in IE6 and 7, the performance of list-style:none is exactly the same.
So I speculate that in IE6 and 7 When UL has float:left and display:inline attributes and list-style:none is set, list-style-position also defaults to inside;

So the conclusion I draw is
Under IE6 and 7, when UL does not have float:left;display:inline;:
Regardless of whether there is list-style:none attribute, the list symbol is hidden and does not take up space (5,6 in the code below )
When UL has float:left;display:inline; attribute
list-style:none, the list symbol is hidden, but the position (list-style-position:inside) is still left; (in the following code UL1, ul3)
list-style:none is not set; the list character is hidden and does not occupy a position (list-style-position:outside)(code UL4)

And UL02 is participating in the test The performance in each browser is relatively ideal

The last piece of code compares the performance of list-style under various circumstances, especially the performance of 4, 5, and 6 under IE6 and 7

Run the code box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style:none还是list-style:none outside none;</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none outside none;}
.ul03,.ul03 li{list-style:none inside none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</style>
</head>
<body>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;未做css reset</p>
<ul class="ul04">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>5: 无 display,float属性 list-style为none;</p>
<ul class="ul05">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>6: 无 display,float属性 无list-style:none;</p>
<ul class="ul06">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

Through the comparison of the above code performance results, I think:
As long as list-style-type is none in firefox, no matter the value of list-stype-position is outside or inside, list-style can be hidden very well
But in IE6 and 7, just setting list-style:none is not enough to solve all problems
So I think using list-style when css reset: none outside none better

The above is the detailed content of In-depth understanding of list-style in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the meaning of list-style-type: none in CSS?Next article：What is the meaning of list-style-type: none in CSS?

See more

In-depth understanding of list-style in CSS

Related articles