為什麼css ：list-style-type屬性常常會不起作用？-css教學-PHP中文網

首頁

web前端

css教學

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

黄舟

Jun 29, 2017 pm 01:47 PM

list-style-type 不起作用為什麼

如果你在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

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1272

C# 教程

1252

Related knowledge

如何在父分類的存檔頁面上顯示子分類 Apr 19, 2025 pm 11:54 PM

您想了解如何在父分類存檔頁面上顯示子分類嗎？在自定義分類存檔頁面時，您可能需要執行此操作，以使其對訪問者更有用。在本文中，我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類？通過在父分類存檔頁面上顯示所有子分類，您可以使其不那麼通用，對訪問者更有用。例如，如果您運行一個關於書籍的WordPress博客，並且有一個名為“主題”的分類法，那麼您可以添加“小說”、“非小說”等子分類法，以便您的讀者可以