Question

我在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

然而，这并未在不同的浏览器上正确显示项目符号列表。

在谷歌浏览器（36.0.1985.143米）上，它会按预期显示。

enter image description here

然而，在FireFox（31.0）上，它显示如下列表。

enter image description here

在Internet Explorer（8）上，列表如下所示。

enter image description here

将表格嵌套在<ul>内是否无效？此列表是否可以显示在所有主要浏览器上，如第一个快照所示？

Answer 1

list-style-type仅适用于display:list-item

<强>列表样式类型：适用于：带有＆＃39; display：list-item＆＃39;
的元素

<强>参考

list-style-type

The ul element

ul元素：内容模型：零个或多个li和支持脚本的元素。

fiddle

Answer 2

标记列表中的表格或任何不是预期的list-item表格是无效的，因为它可能导致不良结果（好吧这是一种BS答案，但它是一个列表，寻找列表 - 没有包裹在表格元素中的项目。从技术上讲，它可以起作用，但你必须比你需要的更聪明才能得到你想要的东西。

如果您在list-styles元素上使用table的组合，则可以达到列出的效果 - 只需删除<ul>和<li>并移动<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/

项目符号列表以及HTML表格

2 个答案: