换行链接<a>围绕<div> [英] Wrap link <a> around <div>

问题描述

是否可以像这样将 标签包裹在

s 周围:

<div class="layout"><div class="title">视频类型<div class="description">视频描述</div>

</a>

Eclipse 告诉我 div 的位置不对?如果这是不允许的.如何让整个布局"类成为一个链接?

解决方案

该结构在 HTML5 中是有效的，因为在 HTML5 中，锚点几乎可以包装除其他锚点和表单控件之外的任何元素.现在大多数浏览器都支持这一点，并将问题中的代码解析为有效的 HTML.下面的答案写于 2011 年，如果您支持旧版浏览器(*咳嗽* Internet Explorer *咳嗽*)，则可能会有用.

<小时>

没有 HTML5 解析器的旧浏览器(比如 Firefox 3.6)仍然会对此感到困惑，并可能弄乱 DOM 结构.

HTML4 的三个选项 - 使用所有内联元素:

<span class="layout"><span class="title">视频类型<span class="description">视频描述</span></span></span></a>

然后用 display: block

设置样式<小时>

使用 JavaScript 和 :hover:

<div class="title">视频类型<div class="description">视频描述</div>

和(假设 jQuery)

$('.layout').click(function(){//做点什么}):

和

.layout:hover {//悬停效果}

<小时>

或者最后使用绝对定位，用CSS放置一个a锚点来覆盖整个.layout

<div class="title">视频类型<div class="description">视频描述</div>
<a class="more_link" href="somewhere">更多信息</a>

和 CSS:

.layout {位置:相对；}.layout .more_link {位置:绝对；显示:块；顶部:0；底部:0；左:0；右:0；文本缩进:-9999px；z-索引:1000；}

当然，这不适用于旧版本的 IE.

Is it possible to wrap an <a> tag around <div>s like so:

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video description</div>
        </div>
    </div>
</a>

Eclipse is telling me the div's are in the wrong place? If this is not allowed. How can I make the entire 'layout' class become a link?

解决方案

That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).

---

Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.

Three options for HTML4 - use all inline elements:

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

Then style with display: block

---

Use JavaScript and :hover:

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

And (assuming jQuery)

$('.layout').click(function(){
    // Do something
}):

And

.layout:hover {
    // Hover effect
}

---

Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

And CSS:

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

This won't work with older versions of IE, of course.

这篇关于换行链接&lt;a&gt;围绕&lt;div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！