首頁  >  文章  >  web前端  >  為什麼css :list-style-type屬性常常會不起作用?

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

黄舟
黄舟原創
2017-06-29 13:47:283310瀏覽

如果你在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;或去掉浮動設定。

以上是為什麼css :list-style-type屬性常常會不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn