Question

这是我的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>

现在即使我让李有左边距，但李的内部的td也没有向左移动。即使我做了

li td {
    margin-left: 30px;
}

td不会向左移动。如何让li里面的td收到每个li的左边距？

Answer 1

来自我的评论：

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

HTML / CSS - 在li里面放置td会删除li上的左边距？

1 个答案: