Question

我经常使用<a>标签包装块级元素，以使整个组可以点击。例如，假设我有一个事件列表：

<ul>
    <li>
        <a href="#" style="display: block;">
            <div style="float: left; display: inline;">12/12/2010</div>
            <div style="float: left; display: inline;">Some event information</div>
        </a>
    </li>
    <!-- etc... -->
</ul>

注意：仅应用内联样式。

这样，整个事物都是可点击的，而不仅仅是元素中的文本。

当然，validator.w3.org的（x）html验证器不喜欢这个，因为我已经将块级元素（<div>）置于内联级元素（<a>）中。尽管如此，我使用CSS将<a>标记定义为块级别，将<div>标记定义为内联。

我总是按照经验法则编写，你应该总是努力创作有效的代码; 然而，如果您的代码未验证，您理解为什么它不验证，您有正当理由不验证 >，那就不要担心了。

所以我的问题是三方面的：

这是有效的原因吗？
可用性增加（通过具有更大的可点击区域）是否值得进行验证？
有更好的方法吗？

Answer 1

使用span如下所示是完全有效的，您可以达到同样的效果。

<a href="#" style="display: block;">
    <span style="float: left;">12/12/2010</span>
    <span style="float: left;">Some event information</span>
</a>

Answer 2

我会使用<span>代替<div>，然后应用相同的样式。这样你就可以获得最好的世界。您仍然可以拥有更大的点击目标，但它也会验证。

Answer 3

关于你的三个问题：

不值得争论。
如果你能找到更好的方法，那就没有了。
使用<span>代码而不是div（实际上，通过制作div display:inline可以获得什么？）;或使用Javascript并将onclick事件添加到包含<li>。

Answer 4

在我看来，是的。但是，如果您决定忽略验证，那么您自己就是独立的。
当然，用户可以赢得作者的利益。
使用HTML5，允许<a>个元素包装块级元素。

Answer 5

我通过向div添加onclick事件解决了这个问题，即onclick =“window.location ='redirectpage.html'”＆gt;然后是样式光标：指针。像魅力一样工作，也有效。

<a> Tag, Validation vs Usability</a>中的块级元素

5 个答案: