帶有HTML表格的項目列表

我在HTML表格中顯示項目符號列表，如下所示。帶有HTML表格的項目列表

<ul style="list-style-type: decimal;"> 
    <table> 
     <tbody> 
      <tr><td><li>Description</li></td></tr> 
      <tr><td><li>Description</li></td></tr> 
      <tr><td><li>Description</li></td></tr> 
      <tr><td><li>Description</li></td></tr> 
      <tr><td><li>Description</li></td></tr> 
     </tbody> 
    </table> 
</ul>

JSFiddle

然而，這並不在不同瀏覽器中正確顯示項目符號列表。

在Google Chrome（36.0.1985.143 m）上，它按預期顯示。

enter image description here

在Firefox（31.0），然而，它顯示如下列表。

enter image description here

在Internet Explorer（8），示出了列表如下。

enter image description here

它是一個無效的標記要嵌套<ul>裏面的桌子？此列表是否可以顯示在所有主流瀏覽器上，如第一張快照所示？

來源

2014-09-02 Tiny

這是無效的HTML。只有李可以是UL的孩子 – 2014-09-02 17:37:16

list-style-type只適用於display:list-item

列表樣式類型： 適用於：元素與 '顯示：列表項'

參考

list-style-type

The ul element

ul元素：內容模型：零個或多個Li和腳本的支撐元件。

fiddle

來源

2014-09-02 17:40:01

是無效的列表中標記的表 - 或任何非預期的list-item，因爲它可能會導致意外的結果（好吧，這是類型的BS的答案，但它是一個列表，尋找不包含在表格元素中的列表項，從技術上講，它可以工作，但是你必須得到比你需要的更聰明的東西）。

如果你的list-styles在table元素相結合的工作，你可以達到上市的效果 - 只需要剝離出<ul>和<li> S和移動實際列表的樣式到<tr>小號

HTML

<table> 
    <tbody> 
     <tr><td>Description</td></tr> 
     <tr><td>Description</td></tr> 
     <tr><td>Description</td></tr> 
     <tr><td>Description</td></tr> 
     <tr><td>Description</td></tr> 
    </tbody> 
</table>

CSS

tbody tr { 
    display: list-item; 
    list-style-type: decimal; 
    list-style-position: outside; 
    margin-left: 20px; 
} 
tbody tr > * { 
    display: inline-block; 
}

只需要是table家長特定，所以它知道爲孩子編號列表項。看看@http://jsfiddle.net/1j82y55y/

來源

2014-09-02 18:00:39 Evan

帶有HTML表格的項目列表

回答

相關問題