很多時候我們都需要多對列表元素進行初始化，方法是給列表元素添加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