首页 文章

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

提问于
浏览
1

我经常用 <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 回答

  • 5

    使用 span 如下所示是完全有效的,您可以达到相同的效果 .

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

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

  • 0

    关于你的三个问题:

    • 不值得精力争辩 .

    • 如果你能找到更好的方法,那就没有了 .

    • 使用 <span> 标签而不是div(真的,通过制作div display:inline 可以获得什么?);或使用Javascript并将onclick事件添加到包含 <li> .

  • 2
    • 在我看来,是的 . 但是,如果您决定忽略验证,那么您自己就是独立的 .

    • 当然,用户的利益可以赢得作者的利益 .

    • 使用HTML5,允许 <a> 元素包装块级元素 .

  • 0

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

相关问题