Question

我知道这是一个常见问题，但我无法解决。在表格单元格中，我有以下代码：

<a href="#1" class="nolink">
    <div class="a1"></div>
    <p class="a4">
        <span class="big">1.</span>
        First thing to do
    </p>
</a>

根据错误：

此消息的一个可能原因是您试图放置内联中的块级元素（例如“<p>”或“<table>”）元素（例如“<a>”，“<span>”或“<font>”）。

我理解错误，并且我知道我不能在<div>内放置<p>和<a>。我尝试在display:block元素上设置<a>，但这不起作用。我该如何解决这个问题？

Answer 1

解决方案：将DOCTYPE声明为HTML5

<!DOCTYPE html>

与HTML4相比，HTML5中添加，更改，调整和删除了很多内容。您可以在w3c上看到差异列表。您所追求的更改是Content-Model中引入的更改。

a元素现在具有透明的内容模型（除了它不允许交互式内容后代），这意味着它具有与其父级相同的内容模型。这意味着a元素现在可以包含例如div元素，如果其父元素允许流内容。

Answer 2

进行验证的是什么？ HTML5不再具有此限制，因此解决方案是我使用HTML5 doctype

<!DOCTYPE html>

"Bloc-level Links" In HTML 5

Answer 3

您确定display:block无效吗？你想要实现这样的事情jsFiddle吗？即使整个表格单元格可以点击？

这是CSS：

td { width: 50%; }
.big { font-size: 1.5em; }
.nolink { display: block; background-color: yellow; }
.nolink:hover { background-color: #939393; }
.nolink .icon { 
    display: inline-block; 
    width: 21px; 
    height: 21px;
    background-image: url('https://abs.twimg.com/a/1368740917/t1/img/twitter_web_sprite_icons.png');
    background-position: 0 -110px;

}

这是HTML：

<table border=1 width="100%">
    <tr>
        <td>column 1 text</td>
        <td>
            <a href="#1" class="nolink">
                <span class="icon"></span>
                <span class="big">1.</span>
                First thing to do
            </a>
        </td>
    </tr>
</table>

[编辑]更新了在锚链接内添加图标/图像精灵的代码： Working jSFiddle Demo

如何在<a> element</a> </div>中正确放置<div>元素

3 个答案: