水平排序列表（和IE）

我期待產生類似這樣的輸出：從下面的HTML代碼水平排序列表（和IE）

<ol> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ol>

看來，Internet Explorer不希望

1. One  2. Two  3. Three  4. Four

顯示數字（列表項）的浮動時，爲了讓他們水平。

有沒有人遇到這個，發現一個解決方案，我可以使用嗎？

來源

2009-02-23 Michael

此代碼工作在我所測試的所有瀏覽器。如果你還沒有找到答案，最流行答案的建議是有效的。只要調整你的寬度，如果你想它包裹。

<ol style="list-style-type:decimal; width: 600px;"> 
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li> 
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li> 
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li> 
</ol> 

ol.horizontal{ 
    list-style-type: decimal; 
    width: 600px; 
} 

ol.horizontal li{ 
    float: left; 
    width: 200px; 
    padding: 2px 0px; 
} 

<ol class="horizontal"> 
    <li>Test</li> 
    <li>Test</li> 
    <li>Test</li> 
</ol>

來源

2009-11-06 14:34:59

CSS：

li { display:inline; }

來源

2009-02-23 20:44:50

該解決方案從IE，Firefox，Opera和Safari中的元素中刪除有序列表號。從他的問題來看，我假設他希望他們保留下來。 – 2009-02-23 20:50:29

，你可以用這個CSS？

li {display: inline}

編輯：這不保留項目編號，我不知道是否有任何方法。作爲替代，我想你所能做的就是手動插入數字，直到瀏覽器獲得更好的CSS計數器支持。

來源

2009-02-23 20:44:59

此解決方案從IE，Firefox，Opera和Safari中的元素中刪除有序列表號。從他的問題來看，我假設他希望他們保留下來。 – 2009-02-23 20:49:58

好點...我會看看我能否找到並編輯它。 – 2009-02-23 20:56:49

我試過li {display：inline; list-style-type：decimal; }但它在列出的瀏覽器中沒有效果。 – 2009-02-23 21:00:28

你可以不設置內聯元素的寬度。，所以我通常最終會浮他們，而不是

li 
{ 
    float: left; 
    width:30px; 
}

來源

2009-02-23 20:48:24

我試過在this page每display財產，在IE中顯示水平名單時，他們沒有保持有序列表編號（也不是在Firefox，歌劇保留或適用於Windows的Safari瀏覽器 - 儘管我承認我沒有在那裏測試每個display屬性）。

該（部分 - 在僅Firefox）的唯一解決方案的工作原理是Al W's answer。

我認爲，如果你想有一個橫向編號列表，你將有可能產生在服務器上或使用JavaScript來重新插入數字操縱客戶端上的清單。

來源

2009-02-23 21:10:22

我發現this page about IE hasLayout有用。它包括這樣的列表格式的討論（該鏈接指向的頁面的列表部分）

來源

2009-04-09 12:12:12

好吧，你需要一個浮動，寬度和列表樣式類型屬性添加到CSS。看起來是這樣的：

 
li{ 
    float:left; 
    width:50px; 
    list-style-type:decimal; 
}

具志堅

來源

2009-04-09 12:48:36 SvenFinke

水平排序列表（和IE）

回答

相關問題