如何使浮動列表項在IE7中顯示其項目符號？
[英]How can I have floated list items display their bullet in IE7?
問題描述
我有一個浮動列表項的列表，應使用標准項目符號。 但是僅在IE7中，這些項目符號不會出現：
這是所有代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
/*ul { overflow: hidden; margin: 1em; padding: 1em; } */
ul li
{ width: 30%;
float: left;
border: dashed red 1px;
/* list-style-position: outside; list-style-type: disc; margin-left: 1em; padding: 1em; zoom: 1; */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit </li>
<li>consectetuer adipiscing elit</li>
<li>Etiam sapien neque</li>
<li>dictum at</li>
<li>bibendum ut</li>
<li>posuere quis</li>
</ul>
</body>
</html>
注釋掉的CSS是我嘗試過的規則，但沒有使項目符號出現。
當我移除float: left; 聲明，項目符號確實出現在IE7中。
如何在子彈中顯示帶有項目符號的浮動lis？
3 個解決方案
解決方案1
3 2010-09-01 23:18:51
根據我對問題的評論， JSBin上發布了一個演示。
使用以下CSS似乎可以實現您的目標：
ul li {
float: left;
list-style-position: inside;
margin: 0 0 0 1em;
}
解決方案2
2 2013-08-20 14:17:52
我也看到子彈在MacOS上的Safari中也消失了……我發現了一個頁面 ，其中有一條評論為我提供了一個對我有用的解決方案：放置一個display: list-item; 當它們出現在li內時，將樣式設置為a或span標記，如下所示：
CSS：
ul li {
width: 30%; /* or whatever; copying your example */
float: left;
}
ul li a, ul li span {
display: list-item;
}
HTML：
<ul>
<li><a href="some/thing">link to something</a></li>
<li><span>not a link</span></li>
<li> ... [oops, no bullet!] </li>
</ul>
請注意，在a標簽的情況下，項目符號將成為鏈接的一部分（並標記為一個，等等）。 隨着跨度（並刪除ul li a的造型），這應該是可以避免的。
可悲的是，這確實意味着要更改您的標記...但是至少希望它不是完全不合理的更改類型。
還要注意：這也適用於ol列表，但有一個有趣的警告：如果停止浮動它們（這樣它們將恢復其正常編號），則最終每個項目都被編號兩次！ 因此，請注意對所有li a或li span組合執行此操作； 也許您想對將使用這種方式處理的列表使用一個類，並且僅將這些樣式應用於該類。 例如，可以將以上內容更改為：
.floated li { width: 30%; float: left; }
.floated li a, .floated li span { display: list-item; }
我希望這會有所幫助（如果不是最初的提問者，那么大的話，有時會有人）。
解決方案3
1 已采納 2010-09-13 17:51:46
我不得不使用一種變通辦法來使項目符號顯示在IE7中。 我創建了項目符號的圖像，並將其設置為LI的背景圖像以及一些額外的填充。
我很樂意接受另一個答案！ ;）
如何在IE7中用“display：block”覆蓋“display：inline-block”？
[英]How can I override “display:inline-block” with “display: block” in IE7?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.