Html 如何将项目符号转换为水平列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13291891/
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 convert bullet points into horizontal list?
提问by Koala7
I want to show disc bullet points in my horizontal list.
我想在我的水平列表中显示光盘项目符号。
I know that once we define in CSS: display: inline;, the class definition: list-style-type: discdoes not work.
我知道一旦我们在 CSS: 中display: inline;定义，类定义：list-style-type: disc就不起作用了。
So this has been my solution:
所以这是我的解决方案：
<ul>
<li>· EN</li>
<li>· ES</li>
<li>· ES</li>
<li>· DE</li>
<li>· FR</li>
</ul>
I have put the symbol disc bullet point manually in my horizontal list and then I have declared that in my head section: <meta http-equiv="content-type" content="text/html;charset=utf-8" />.
我已将符号光盘项目符号手动放入我的水平列表中，然后在我的头部部分中声明：<meta http-equiv="content-type" content="text/html;charset=utf-8" />。
In My coda editor preview they look fine, but if i try to browser it I get ? this.
在我的尾声编辑器预览中，它们看起来不错，但是如果我尝试浏览它，我得到了吗？这个。
Why? How can I figure it out the problem? Otherwise, what is the best solution to show disc bullet point in a horizontal list?
为什么？我怎样才能弄清楚问题所在？否则，在水平列表中显示光盘项目符号的最佳解决方案是什么？
回答by Andy
Instead of choosing display:inlinefor your liyou could keep them as blocks and do this:
您可以将它们保留为块并执行以下操作，而不是display:inline为您选择li：
li {
float:left;
}
Then you could play with the margins to space them how you need.
然后，您可以使用边距来根据需要将它们隔开。
回答by Enve
Try display:inline-block
尝试显示：内联块
CSS
CSS
ul li{
display:inline-block;
}
To work in IE6 and IE7:
在 IE6 和 IE7 中工作：
CSS
CSS
ul li{
display:inline-block;
zoom:1;
}
回答by Jukka K. Korpela
The problem with you approach is twofold. First, the character “·” you are using is not a bullet; it is the MIDDLE DOT with multiple usage, mainly as a separator in texts. The BULLET “?” character is more suitable. Second, you are declaring UTF-8, which is fine, but then you document needs to be UTF-8 encoded in reality, and it apparently is (rather, looking from here, it is probably windows-1252 encoded).
你的方法的问题是双重的。首先，您使用的字符“·”不是子弹；它是多用途的中间点，主要用作文本中的分隔符。子弹 ”？” 性格比较合适。其次，您声明了 UTF-8，这很好，但是您的文档实际上需要使用 UTF-8 编码，而且显然是（相反，从这里看，它可能是 windows-1252 编码的）。
But as a quick fix that does not require a solution to the encoding problem, you can write BULLET using the entity reference •, e.g. <li>• EN</li>.
但是作为不需要解决编码问题的快速解决方案，您可以使用实体引用编写 BULLET •，例如<li>• EN</li>。
There are of course other approaches, too. But if you set display: inline, then browsers will not generate bullets, as they do that only for elements that that display: list-item. You would need to include the bullets into the element content, or to use generated content (using the :beforepseudo-element).
当然也有其他方法。但是，如果您设置了display: inline，则浏览器将不会生成项目符号，因为它们仅对display: list-item. 您需要将项目符号包含到元素内容中，或者使用生成的内容（使用:before伪元素）。
