Html 如何在项目符号内显示无序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dispay unordered list inline with bullets?
提问by Joel Coehoorn
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
我有一个带有无序列表的 html 文件。我想水平显示列表项但仍保留项目符号。无论我尝试什么，每当我将样式设置为内联以满足水平要求时，我都无法显示项目符号。
采纳答案by Joel Coehoorn
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here*— you still lose the bullet. I'm not really keen on using a background image either.
我在其他答案中看到的最佳选择是使用float:left;. 不幸的是，它在 IE7 中不起作用，这是这里的一个要求*— 你仍然失去了子弹。我也不是很喜欢使用背景图片。
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding •to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
我要做的是（没有其他人建议，因此是自我回答）是手动添加•到我的 html，而不是设置样式。它不太理想，但它是我发现的最兼容的选项。
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
编辑：*当前读者注意原始发布日期。IE7 不太可能成为问题。
回答by Peter Hilton
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :beforeselector works for me:
我遇到了同样的问题，但仅在 Internet Explorer 中（我测试了版本 7） - 而不是在 Firefox 3 或 Safari 3 中。使用:before选择器对我有用：
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
我在这里使用的是方形项目符号，但普通项目符号 \2022 的工作原理相同。
回答by Chris Marasti-Georg
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
您还可以在 <li> 元素上使用背景图像，并带有填充以防止文本重叠。
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
回答by Neall
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
浏览器显示项目符号是因为样式属性“display”最初设置为“list-item”。将 display 属性更改为“inline”会取消列表项获得的所有特殊样式。您应该能够使用 :before 选择器和 content 属性来模拟它，但是 IE（至少到版本 7）不支持它们。用背景图像模拟它可能是最好的跨浏览器方式。
回答by L.Jordens
It's actually a very simple fix. Add the following to the ul:
这实际上是一个非常简单的修复。将以下内容添加到 ul：
display:list-item;
Adding this CSS line will add the bullet points.
添加此 CSS 行将添加项目符号点。
回答by qui
Keep them display blocked, give them a width and float left.
保持它们显示被阻止，给它们一个宽度并向左浮动。
That will make them sit by side, which is like inline, and should maintain the list style.
这将使它们并排坐在一起，就像内联一样，并且应该保持列表样式。
回答by AenAllAin
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
我只是在胡闹，遇到了同样的浏览器限制问题；当我搜索答案时，您的帖子没有答案。这可能为时已晚，无法帮助您，但我认为为了后代的缘故，我应该发布它。
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
为了解决我的问题，我所做的只是在第一个列表的每个列表项中嵌入另一个列表；像这样...
HTML:
HTML：
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
CSS：
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
IE7页面：
o a o b o c
...it is a dumb solution, but it seems to work.
...这是一个愚蠢的解决方案，但它似乎有效。
回答by Erik van Brakel
Did you try float: lefton your <li/>? Something like this:
你试穿float: left了<li/>吗？像这样的东西：
<!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>
I only tested Firefox 3.0.1, works there. The marginis set because else your bullet overlaps the previous item.
我只测试了 Firefox 3.0.1，在那里工作。该margin设置，因为否则你的子弹重叠的上一个项目。
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/>to have no height. If you want to add a border or something, you'll get weird results.
另外：请注意，当您浮动项目时，您会将它们从正常流中移除，这反过来会导致<ul/>没有高度。如果你想添加边框什么的，你会得到奇怪的结果。
One way to fix that is to add the following to your styles:
解决此问题的一种方法是将以下内容添加到您的样式中：
ul {
overflow: auto;
background: #f0f;
}
回答by kris
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
您可以使用 Character 实体，请参阅参考：http: //dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
回答by YeRe415
In HTML, I added a break after each li like this:
在 HTML 中，我在每个 li 之后添加了一个中断，如下所示：
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
和 CSS：
li { float:left; }
