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

我知道一旦我們在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" />。

在我的結尾編輯器預覽中，它們看起來不錯，但是如果我嘗試瀏覽它，我會得到這個。

爲什麼？我怎樣才能找出問題所在？否則，在水平列表中顯示光盤子彈點的最佳解決方案是什麼？

來源

2012-11-08 Koala7

而不是選擇display:inline您li你可以讓他們爲塊，這樣做的：

li { 
    float:left; 
}

然後，你可以用利潤空間他們你需要玩。

來源

2012-11-08 15:20:52 Andy

如果你想要列表中的子彈，這本身並不完全適用。第一個子彈是o.k.但其餘的項目符號將顯示在列表上前一項的單詞的頂部。即第三項的子彈顯示在第二項的單詞上，依此類推。我通過向'li'元素添加'margin-right：30px;'來糾正此問題。我會假設還有其他的解決方案，我會很感興趣的，因爲我更喜歡一個不需要我指定特定像素數量而是指定一個百分比的方法，或者間距依賴於其他方法的方法。 – Rolo

嘗試顯示：inline-block的

CSS

ul li{ 
    display:inline-block; 
}

要在IE6和IE7工作：

CSS

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

來源

2012-11-08 15:21:22 Enve

我仍然建議浮動左側，而不是顯示爲內聯塊，因爲舊版IE可能會在將塊元素顯示爲內聯塊元素時出現問題。 – Andy

添加您的css縮放：1並在所有瀏覽器中都能正常工作 – Enve

我在評論之後立即更新了答案;） – Andy

您的問題有兩方面的問題。首先，你使用的字符「·」不是子彈;它是多用途的MIDDLE DOT，主要作爲文本中的分隔符。 BULLET「•」字符更適合。其次，你聲明的是UTF-8，這很好，但是你的文檔在現實中需要使用UTF-8編碼，而且顯然（從這裏看，它可能是windows-1252編碼）。

但是作爲不需要解決編碼問題的快速解決方案，您可以使用實體參考•（例如， <li>• EN</li>。

當然也有其他的方法。但是，如果你設置了display: inline，那麼瀏覽器將不會生成子彈，因爲它們只對那些display: list-item的元素這樣做。您需要將這些項目符號添加到元素內容中，或者使用生成的內容（使用:before僞元素）。

來源

2012-11-08 17:04:20

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

回答

相關問題