HTML / CSS - 将 td 放在 li 内会删除 li 的左边距？答案

【问题标题】：HTML / CSS - Placing td inside li removes left margin on li?HTML / CSS - 将 td 放在 li 内会删除 li 的左边距？
【发布时间】：2014-08-28 12:13:14
【问题描述】：

这是我的 HTML（CSS 是 HTML 的一部分）：

<!DOCTYPE html>
<html>
    <head>
        <style>
            table td {
                border: 1px solid black;
            }

            li { 
                margin-left: 30px;
            }

            .first {
                width: 100%
            }
        </style>
    </head>

    <body>
        <table>
            <tr>
                <td class='first'>text</td>
                <td><img src='shipping3.png' width='30px' /></td>
            </tr>

            <ul>
                <li>
                    <tr>
                        <td class='first'>text</td>
                        <td><img src='shipping3.png' width='30px' /></td>
                    </tr>
                </li>

                <ul>
                    <li>
                        <tr>
                            <td class='first'>text</td>
                            <td><img src='shipping3.png' width='30px' /></td>
                        </tr>
                    </li>
                </ul>

            </ul>
        </table>

    </body>
</html>

现在，即使我让 li 有一个左侧边距，li 内部的 td 也不会向左移动。即使我这样做了

li td {
    margin-left: 30px;
}

td 没有向左移动。如何让 li 中的 td 接收到每个 li 的 margin-left？

【问题讨论】：

为什么要在无序列表中嵌套表格行？
这是无效标记。样式问题将是继承和不一致的。清理标记（ul 和 li 不能是 tr 的子级）。
@user574632 基本上我正在尝试创建一个论坛（PHP 代码已被删除）。每个帖子由两个 td 表示（第一个 td 有文本，第二个 td 有一个图像）。第一篇文章没有缩进。帖子可以收到任意数量的回复。每个回复都可以收到任意数量的回复。我能想到的动态缩进回复的唯一方法是每次用户回复回复时添加一个新列表。所以对回复的回复将是列表中的一个列表（它将自动接收两个缩进......你明白我的意思吗？）
您的标记无效。这种无效标记将导致未定义的行为（基于客户端浏览器决定尝试呈现它的方式）。请注意the documentation 的内容模型部分。您需要首先更正标记，然后找到解决缩进问题的方法。这里还不足以让我说出解决方案是什么。
好吧，听起来你不是在展示表格数据，所以把表格全部扔掉，只使用浮动 div - 然后你就可以使用嵌套列表了。

标签： html css html-lists html-table margin

【解决方案1】：

来自我的评论：

您的标记无效。这种无效标记将导致未定义的行为（基于客户端浏览器决定尝试呈现它的方式）。请注意the documentation 的内容模型部分。您需要首先更正标记，然后找到解决缩进问题的方法。这里还不足以让我说出那个解决方案是什么。

【讨论】：