首页 / 知识

关于html：如何在项目符号内联显示无序列表？

2023-04-13 14:53:00

How to dispay unordered list inline with bullets?

我有一个无序列表的html文件。我想水平显示列表项，但仍保留项目符号。无论我如何尝试，只要将样式设置为内联以满足水平要求，就无法显示项目符号。

我在其他答案中看到的最佳选择是使用float:left;。不幸的是，它在IE7中不起作用，这是这里的要求*，您仍然会失去子弹。我也不是很热衷于使用背景图像。

我要做的是(没有人建议，因此是自我回答)是手动将添加到我的html中，而不是设置样式。它不理想，但它是我发现的最兼容的选项。

编辑：*当前读者注意原始的张贴日期。 IE7不太可能成为一个问题。

我有同样的问题，但仅在Internet Explorer(我测试了版本7)中-在Firefox 3或Safari 3中则没有。使用：before选择器对我有效：

1
2
3
4
5
6
7
8

ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}

我在这里使用方形的项目符号，但是普通的项目符号 2022会起作用。

您也可以在

元素，并带有填充以防止文本重叠。

1
2
3
4
5

li {
background-image: url(i/bullet.webp) no-repeat center left;
padding-left: 20px;
display: inline;
}

实际上，这是一个非常简单的修复。将以下内容添加到ul中：

1	display:list-item;

添加此CSS行将添加项目符号点。

浏览器显示项目符号，因为样式属性" display"最初设置为" list-item"。将显示属性更改为"内联"将取消列表项获得的所有特殊样式。您应该可以使用：before选择器和content属性对其进行仿真，但是IE(至少在版本7中)不支持它们。用背景图像模拟它可能是最好的跨浏览器方法。

保持它们的显示不被遮挡，给它们一个宽度并向左浮动。

这将使它们并排放置，就像内联一样，并应保持列表样式。

我只是一团糟，在相同的浏览器约束下遇到了相同的问题；当我搜索答案时，您的帖子没有答案。这可能为时已晚，无法为您提供帮助，但我认为为后代，我应该发布它。

我要解决的所有问题是在第一个列表的每个列表项中嵌入另一个包含一个项的列表。像这样...

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

CSS：

1	.block-list > ul > li { display: inline; float: left; }

IE7页面：

1	o a o b o c

...这是一个愚蠢的解决方案，但似乎可行。

您是否在

上尝试了float: left？像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>

<ul>

<li>
test
</li>

<li>
test2
</li>

</ul>

</body>
</html>

我只测试了Firefox 3.0.1，可以在其中运行。之所以设置margin，是因为您的项目符号与上一个项目重叠。

加成：
请注意，当您浮动项目时，会将其从正常流程中删除，这反过来会导致

解决此问题的一种方法是在样式中添加以下内容：

1
2
3
4

ul {
overflow: auto;
background: #f0f;
}

在HTML中，我在每个li之后都添加了一个中断，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<li>
Water is Sacred
</li>

<li>
Water is Sacred
</li>

<li>
Water is Sacred
</li>

<li>
Water is Sacred
</li>

<li>
Water is Sacred
</li>

<li>
Water is Sacred
</li>

和CSS：