我经常用 <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>
NOTE :仅应用示例内联样式 .
这样,整个事物都是可点击的,而不仅仅是元素中的文本 .
当然,validator.w3.org的(x)html验证器没有将块级元素( <div>
)置于内联级元素( <a>
)中 . 尽管如此,我使用CSS将 <a>
标签定义为块级别,将 <div>
标签定义为内联级别 .
我总是按照经验法则编写,你应该总是努力创作有效的代码;但是,如果您的代码未验证,并且您了解其未验证的原因,并且您有正当理由不进行验证,那么请不要担心 .
所以我的问题是三方面的:
-
这是否有效的原因不能验证?
-
可用性增益(通过具有更大的可点击区域)是否值得进行验证?
-
还有更好的方法吗?
5 回答
使用
span
如下所示是完全有效的,您可以达到相同的效果 .我会使用
<span>
而不是<div>
然后应用相同的样式 . 这样你就可以获得最好的世界 . 您仍然可以拥有更大的点击目标,但它也会验证 .关于你的三个问题:
不值得精力争辩 .
如果你能找到更好的方法,那就没有了 .
使用
<span>
标签而不是div(真的,通过制作divdisplay:inline
可以获得什么?);或使用Javascript并将onclick事件添加到包含<li>
.在我看来,是的 . 但是,如果您决定忽略验证,那么您自己就是独立的 .
当然,用户的利益可以赢得作者的利益 .
使用HTML5,允许
<a>
元素包装块级元素 .我通过向div添加一个onclick事件来解决这个问题,即onclick =“window.location ='redirectpage.html'”>然后是样式光标:指针 . 像魅力一样工作,也有效 .