如何將項目符號轉換成水平列表？

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

嘗試顯示：內聯塊

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>&bull;&nbsp;EN</li> 。

當然還有其他方法。 但是如果你設置display: inline ，那么瀏覽器就不會生成項目符號，因為它們僅對display: list-item元素執行display: list-item 。 您需要將項目符號包含在元素內容中，或使用生成的內容（使用:before pseudo-element）。