带有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表格的项目列表

回答

相关问题