Question

我有一个带浮动列表项的列表，应该使用标准项目符号。但仅在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中。

如何使用子弹在IE7中显示浮动lis？

Answer 1

继我的评论（问题）之后，在JSBin发布了一个演示。

使用以下CSS似乎可以实现您的目标：

ul li {
float: left;
list-style-position: inside;
margin: 0 0 0 1em;
}

Answer 2

我看到子弹在MacOS上的Safari中消失了......我发现a page在其中一条评论中给了我一个对我有用的解决方案：放{{1}在display: list-item;内发生a或span标记的样式，如下所示：

的 CSS： 的

li

的 HTML： 的

ul li { width: 30%; /* or whatever; copying your example */ float: left; } ul li a, ul li span { display: list-item; }

请注意，对于<ul> <li><a href="some/thing">link to something</a></li> <li><span>not a link</span></li> <li> ... [oops, no bullet!] </li> </ul>标记，项目符号将成为链接的一部分（并将其标记为一个，等等）。使用span（并删除a样式），这应该是可以避免的。

可悲的是，这确实意味着改变你的标记...但至少它有望不是一种完全不合理的改变。

同样值得注意的是：这也适用于ul li a列表，但有一个有趣的警告：如果你停止浮动它们（因此它们得到正常的编号），你最终会得到每个项目编号两次！因此，请注意对所有ol或li a组合执行此操作;也许你想要一个类用于这样处理的列表，并且只应用这些样式。例如，可以将上述内容更改为：

li span

我希望这会有所帮助（如果不是原来的提问者，那么这么老了，有人，有时候）。

Answer 3

我不得不使用一种解决方法来让子弹在IE7中显示。我创建了一个子弹的图像，并将其设置为LI的背景图像，以及一些额外的填充。

我很乐意接受另一个答案！ ;）

如何在IE7中显示浮动列表项目？

3 个答案: