為什麼css :list-style-type屬性經常會不起作用?

來源:互聯網
上載者:User
如果你在IE6下設定了list-style-type:disc,應該出現一個實心圓點,卻沒有出現,如下面代碼:

<!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>處理IE的列表BGU</title></head><style type="text/css">ul{list-style:disc outside;width:350px;height:auto;}ul li{width:350px;line-height:30px;}</style></head><body><ul><li>酷站代碼1</li><li>酷站代碼2</li><li>酷站代碼3</li><li>酷站代碼4</li><li>酷站代碼5</li></ul></body></html>

原因:應用了list-style-position: outside; 屬性造成的。

左浮動會使盒模型一個挨一個橫向排練

列表符號的位置在盒模型之外

所以第二個清單項目的符號被第一個清單項目蓋住

另外應用float:left;屬性也會造成LI元素不正常。

解決辦法:把list-style-position:outside;改成list-style-position: inside;或去掉浮動設定。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.