我经常用<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>
标记定义为内联。我一直按照经验法则编写代码,您应该始终努力编写有效的代码;但是,如果您的代码没有验证,并且您理解为什么它没有验证,并且您有一个不验证的有效原因,那么不要担心它。
所以我的问题是三个方面:
这是不验证的有效原因吗?
可用性增益(通过拥有更大的可点击区域)是否值得不验证?
有更好的办法吗?
最佳答案
使用下面的span
是完全有效的,您可以达到相同的效果。
<a href="#" style="display: block;">
<span style="float: left;">12/12/2010</span>
<span style="float: left;">Some event information</span>
</a>
关于html - <a>标签中的块级元素,验证与可用性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3303008/