Question

我想在水平列表中显示光盘项目符号。

我知道，一旦我们在CSS中定义：display: inline;，类定义：list-style-type: disc就不起作用。

所以这是我的解决方案：

                <ul>
                    <li>· EN</li>
                    <li>· ES</li>
                    <li>· ES</li>
                    <li>· DE</li>
                    <li>· FR</li>
                </ul>

我已将符号光盘子弹点手动放入我的水平列表中，然后我在我的头部中声明了这一点：<meta http-equiv="content-type" content="text/html;charset=utf-8" />。

在我的coda编辑器预览中，它们看起来很好，但如果我尝试浏览它，我会得到这个。

为什么呢？我怎么能弄明白这个问题呢？否则，在水平列表中显示光盘项目符号的最佳解决方案是什么？

Answer 1

而不是为display:inline选择li，您可以将它们保留为块并执行此操作：

li {
    float:left; 
}

然后你可以使用边距来区分你需要的方式。

Answer 2

尝试 display：inline-block

<强> CSS

ul li{
    display:inline-block;
}

在IE6和IE7中工作：

<强> CSS

ul li{
    display:inline-block;
    zoom:1;
}

Answer 3

你接近的问题是双重的。首先，你使用的字符“·”不是子弹;它是具有多种用途的MIDDLE DOT，主要作为文本中的分隔符。 BULLET“•”字符更合适。其次，你声明UTF-8，这很好，但是你的文档需要在现实中进行UTF-8编码，而且它显然是（相反，从这里看，它可能是windows-1252编码的。）

但作为一个不需要解决编码问题的快速修复，您可以使用实体引用•编写BULLET，例如： <li>• EN</li>。

当然也有其他方法。但是，如果设置display: inline，则浏览器不会生成项目符号，因为它们仅对display: list-item的元素执行此操作。您需要将项目符号包含在元素内容中，或使用生成的内容（使用:before伪元素）。

如何将项目符号转换成水平列表？

3 个答案: