考虑以下HTML:
<ul>
<li>
<h2>Item 1</h2>
<p class="subline">Meta information bla bla</p>
<div class="description">
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
</li>
<!-- More ... -->
</ul>
我想将每个li
链接到一个链接。作为概念证明,我给你这个无效的代码:
<ul>
<li>
<a href="http://www.google.com/search?q=test+1">
<h2>Item 1</h2>
<p class="subline">Meta information bla bla</p>
<div class="description">
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
</a>
</li>
<!-- More ... -->
</ul>
显然,这不会验证,因为我不能在内联元素中包含块级元素。
编辑:事实证明,上面的代码在HTML5中有效。问题解决了。
我需要找到另一种解决方案:
a
标记插入每个块级元素我考虑添加相同的h2 > a
,p.subline > a
和div > p > a
标记,但我希望使用:hover
的悬停状态影响整个区域链接,这样就行不通了。
我之前使用过Javascript来解决这个问题(li.onclick = function() { window.location.href = ...
),但后来我无法使用鼠标中键在新窗口中打开。这会影响可用性,取决于Javascript,坦率地说,非常烦人。
<ul>
<li>
<a href="http://www.google.com/search?q=test+1">
<span class="title">Item 1</span>
<span class="subline">Meta information bla bla</span>
<span class="description">
<span>Paragraph one</span>
<span>Paragraph two</span>
</span>
</a>
</li>
<!-- More ... -->
</ul>
最有可能的是,display: block
需要应用于某些或所有这些跨度以使其表现出来。
这是有效的HTML,但它真的很糟糕。
有谁知道解决这个问题的最佳方法?
答案 0 :(得分:4)
使用HTML5:
http://davidwalsh.name/html5-elements-links
HTML5比HTML提供了比HTML更简单的思路。老实说,这是一个非常需要的简化。其中一个简化是能够将块级元素(如DIV,H-tag和P)与基本A元素包装在一起。您正确阅读:使用A标记包装块级元素。
就个人而言,我从不担心这一点。是的,它在技术上是无效的,但我是实用验证的粉丝。
答案 1 :(得分:3)
我完全同情你的沮丧。我想你已经总结了问题以及解决问题的常用方法。我已经走了你在各种情况下建议的两条路线。
首先,另一个更有问题的(!)选项。我不会宽恕以下作为最佳做法! ...但您可以将其添加到可能适合有限情况的列表中。
http://jsfiddle.net/peteorpeter/J4sT9/
基本上,如果您可以使用绝对定位和固定高度的大部分内容,您可以将标题作为链接并覆盖其他元素。真的,它非常脆弱和僵硬。你也不能在链接上有背景,否则会掩盖其他元素。
好的,一看到那个烂摊子后,一旦你从口中得到了呕吐的味道,我想你应该:
<li>
发送到隐藏链接<li>
略有改动的标记:
<ul>
<li>
<h2>Item 1</h2>
<p class="subline">Meta information bla bla</p>
<div class="description">
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
<a class="link-for-no-JS" href="buystuff">Item 1</a>
</li>
<!-- More ... -->
</ul>
那里没有任何开创性的东西,只是基本的渐进式增强。功能较少的浏览器必须寻找链接并且可能无法获得任何悬停效果(但它仍然可以是一个漂亮,可用的界面);拥有更高级浏览器的人们可以获得更直观,更灵敏的体验。
答案 2 :(得分:1)
过去我通过将链接放在标题中然后使用Javascript将其传播到li来解决了这个问题。这样大多数人都能获得理想的效果,如果JS关闭,它无论如何都会起作用。当您传播链接时也设置一个类。这是一个额外的复杂性,但它是有效的HTML。取决于你的优先事项。
// psuedocode
on document ready {
els = getElementsByClassName("mylinks")
for el in els {
li = el.parentNode.parentNode;
li.onclick = function() {window.location = el.href}
li.className = "liHover";
}
}
答案 3 :(得分:0)
还有另一种黑客可以根据情况发挥作用。使用a
将position: absolute
元素从自然渲染流中拉出,并使其高度和宽度足以覆盖相关区域。高z-index
值也可以派上用场。这是一个黑客。