<a>标记,验证与可用性中的块级元素

jor*_*ens 1 html css validation usability

我经常使用<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>
Run Code Online (Sandbox Code Playgroud)

注意:内联样式仅作为示例应用.

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

当然,validator.w3.org上的(x)html验证不喜欢这个,因为我已经将块级元素(<div>)内部放置在一个内联级别元素(<a>)中.即使我使用CSS将<a>标签定义为块级别,并将<div>标签定义为内联.

我总是按照经验法则编写,你应该总是努力创作有效的代码; 但是,如果您的代码未验证,并且您了解其未验证的原因,并且您有正当理由不进行验证,那么请不要担心.

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

  1. 这是不是有效的原因吗?
  2. 可用性增益(通过具有更大的可点击区域)是否值得进行验证?
  3. 有没有更好的办法?

ror*_*ryf 5

使用span如下是完全有效的,你可以达到同样的效果.

<a href="#" style="display: block;">
    <span style="float: left;">12/12/2010</span>
    <span style="float: left;">Some event information</span>
</a>
Run Code Online (Sandbox Code Playgroud)

  • 添加显示:内联; 有助于防止旧版IE中的一些CSS错误 - http://www.positioniseverything.net/explorer/doubled-margin.html (2认同)