CSS - 使用css創建3列/ Ordered

我想用css創建一個有序列表的3列列表？CSS - 使用css創建3列/ Ordered

蘋果
橙子
檸檬

現在它顯示即使代碼是顯示有序的無序列表。

例如：1.蘋果將成爲第一列，橙子將成爲第二列，而不是第一列的蘋果，而下面第一列的橘子。

<style> ol{margin-bottom:20px; overflow:hidden; width:600px;} 
li{display:inline; float:left; line-height:1px;} 
#two li {width:50%;} 
#three li {width:33.333%;} 
#four li {width:25%;} 
#six li {width:16.666%;} 
</style> 




<code> 
<ol id="3"> 
<li> 
    <div class="fruit"> 
     apples 
     oranges 
     lemons 
     etc.. 
    </div> 
</li> 
</ol> 
    </code>

來源

2012-12-28 user1932788

你需要更清楚地解釋你想要做什麼。你想要列或有序列表？ –

另外，向我們展示真實的代碼。 –

<ul>是一個無序列表。有序列表使用<ol>。

<ol> 
    <li>item 1</li> 
    <li>item 2</li> 
</ol>

這裏有一個工作示例：w3schools tryit

來源

2012-12-28 22:14:54

嗨弗萊姆，我對從UL到OL的代碼進行了更改，但仍無法識別。 – user1932788

查看示例。那對你有用嗎？你使用的是什麼瀏覽器？你使用任何第三方CSS文件/工具？你是否覆蓋用戶代理樣式？ –

至於建議的flem，

你的代碼應該看起來像

<!DOCTYPE html> 
<html> 
<style> ol{margin-bottom:20px; overflow:hidden; width:600px;} 
li{display:inline; float:left; line-height:15px;} 
#two li {width:50%;} 
#three li {width:33.333%;} 
#four li {width:25%;} 
#six li {width:16.666%;} 
</style> 
<body> 

<h4>An Ordered List:</h4> 
<ol> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ol> 

</body> 
</html>

爲什麼你定義#two我不明白，#trhee等。

來源

2012-12-28 22:41:27 darkapple

我將使用一個屬性文件來調用實際的數字，因爲這個文件將被多次使用。因此另一個實例可能需要使用3列，4等。 – user1932788

CSS - 使用css創建3列/ Ordered

回答

相關問題