如何使浮动列表项在IE7中显示其项目符号？

Question

I've got a list with floated list items which should use the standard bullet. 我有一个浮动列表项的列表，应使用标准项目符号。 But in IE7 only, these bullets don't appear: 但是仅在IE7中，这些项目符号不会出现：

Here is the all the code: 这是所有代码：

<!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>

The commented-out CSS are rules that I tried, but which didn't make the bullets appear. 注释掉的CSS是我尝试过的规则，但没有使项目符号出现。

When I remove the float: left; 当我移除float: left; declaration, the bullets do appear in IE7. 声明，项目符号确实出现在IE7中。

How can I get floated lis with bullets to display in IE7? 如何在子弹中显示带有项目符号的浮动lis？

Answer 1

Further to my comment (to the question), a demo is posted over at JSBin . 根据我对问题的评论， JSBin上发布了一个演示。

With the following CSS seems to achieve your aims: 使用以下CSS似乎可以实现您的目标：

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

Answer 2

I'm seeing the bullets disappear in Safari on MacOS, as well... I found a page that, in one of the comments, gave me a solution that worked for me: Putting a display: list-item; 我也看到子弹在MacOS上的Safari中也消失了……我发现了一个页面，其中有一条评论为我提供了一个对我有用的解决方案：放置一个display: list-item; style onto a or span tags when they occur inside an li , like this: 当它们出现在li内时，将样式设置为a或span标记，如下所示：

CSS: CSS：

ul li {
    width: 30%; /* or whatever; copying your example */
    float: left;
}

ul li a, ul li span {
    display: list-item;
}

HTML: 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>

Note that in the case of an a tag, the bullet will be part of the link (and colored as one, etc.). 请注意，在a标签的情况下，项目符号将成为链接的一部分（并标记为一个，等等）。 With span (and removing the ul li a styling), that should be avoidable. 随着跨度（并删除ul li a的造型），这应该是可以避免的。

Sadly, this does mean changing your markup... but at least it's hopefully not an entirely unreasonable type of change. 可悲的是，这确实意味着要更改您的标记...但是至少希望它不是完全不合理的更改类型。

Also of note: this works with ol lists, too, with an interesting caveat: If you stop floating them (and thus they get their normal numbering back), you end up with each item numbered twice! 还要注意：这也适用于ol列表，但有一个有趣的警告：如果停止浮动它们（这样它们将恢复其正常编号），则最终每个项目都被编号两次！ So, be careful of doing this to all li a or li span combinations; 因此，请注意对所有li a或li span组合执行此操作； perhaps you'd want to use a class for lists that would be treated this way, and only apply these stylings to that. 也许您想对将使用这种方式处理的列表使用一个类，并且仅将这些样式应用于该类。 For example, one might change the above to: 例如，可以将以上内容更改为：

.floated li { width: 30%; float: left; }
.floated li a, .floated li span { display: list-item; }

I hope this helps (if not the original questioner, this being so old, then someone, sometime). 我希望这会有所帮助（如果不是最初的提问者，那么大的话，有时会有人）。

Answer 3

I had to use a workaround to get the bullets to display in IE7. 我不得不使用一种变通办法来使项目符号显示在IE7中。 I created an image of the bullet, and set it as the background-image for the LIs, along with some extra padding. 我创建了项目符号的图像，并将其设置为LI的背景图像以及一些额外的填充。

I would be happy to accept another answer though! 我很乐意接受另一个答案！ ;) ;）

如何使浮动列表项在IE7中显示其项目符号？

问题描述

3 个解决方案

解决方案1
3 2010-09-01 23:18:51

解决方案2
2 2013-08-20 14:17:52

解决方案3
1 已采纳 2010-09-13 17:51:46

如何使浮动列表项在IE7中显示其项目符号？

问题描述

3 个解决方案

解决方案1 3 2010-09-01 23:18:51

解决方案2 2 2013-08-20 14:17:52

解决方案3 1 已采纳 2010-09-13 17:51:46

解决方案1
3 2010-09-01 23:18:51

解决方案2
2 2013-08-20 14:17:52

解决方案3
1 已采纳 2010-09-13 17:51:46