Question

我希望在较大的矩形（整页宽）内有一些看起来和表现为超链接的东西，这也是超链接。下面是ASCII-art表示它应该是什么样子：

|-------------------------------------------|
| Some text  [_link_]                            |
|-------------------------------------------|

整个外部矩形（块元素）是超链接。在这个矩形内部应该有一些文本，在这个文本的末尾应该有另一个链接。

不幸的是，嵌套链接（A元素）在（X）HTML中是非法的：

12.2.2嵌套链接是非法的

A元素定义的链接和锚点不能嵌套;    A元素不得包含任何其他A元素。

（来自http://www.w3.org/TR/html401/struct/links.html#h-12.2.2），这是实现上述

的最自然的方式

<a href="xxx" style="display: block">
  Some text
  <a href="yyy">link</a>
</a>

是无效的HTML。更糟糕的是，在某些情况下，某些Web浏览器通过在外部链接元素的闭合元素之外移动内部链接元素来强制执行此要求。这当然彻底打破了布局。

所以我想问的是如何使用HTML和CSS（但没有JavaScript）来实现上面提到的布局，但HTML中没有嵌套链接元素的资源。如果行为尽可能接近具有嵌套链接元素的行为（对于在实现HTML标准时不过分严格的浏览器），那将是很好的。

编辑（16-01-2009）

澄清：使用两个以上链接元素的解决方案是完全可以接受的

<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...

Answer 1

您可以尝试这样的事情：

div.a {
  position: relative;
  background-color: #F88;
  z-index: 0;
}
a.b {
  position: relative;
  z-index: 2;
}
a.b:hover {
  background-color: #8F8;
}
a.c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
a.c:hover {
  background-color: #88F;
}
a.c span {
  display: none;
}

<div class="a">
  foo
  <a href="bar" class="b">bar</a>
  <a href="foo" class="c"><span>baz</span></a>
</div>

Answer 2

也许这会起作用？

div.parentBox {
  position:relative;
  height:100px;
}
  a.someLink {
    position:absolute;
    top:0;
    left:0;
    height:100px;
  }

// Now just position the two spans

<div class="parentBox">
  <span class="someText">Some Text</span>
  <a href="#" class="someLink">
    <span class="linkText">Link Text</span>
  </a>
</div>

Answer 3

我过去所做的是使用Javascript将正确的功能附加到div（假设它是父元素），这样当单击它时，会运行window.location打开子链接的.href属性

也许这样的事情。

// jQuery Code
$(".parentDivLink").click(function(){
  window.location = $(this).find("a.mainLink").attr("href");
});

<div class="parentDivLink">
  <a href="http://www.google.com" title="Google" class="mainLink">Click Me</a>
</div>

Answer 4

只需将onclick事件处理程序放在外部元素上，当单击时调用“window.location ='yourURLhere';”

你可以添加一个样式属性 - “cursor：pointer”来获取鼠标悬停时的手形光标。

您还可以使用css悬停代码块来获取颜色变化。

编辑：刚刚意识到没有javascript，所以在这种情况下，保留'a'标签，只需在css中为它定义一个样式，这样就可以给它高度，宽度等。

Answer 5

具有负边距的浮点也应该有效。

经过测试（仅限IE6）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Link within link</title>
<style type="text/css">
.Parent {
width: 500px;
background-color: yellow;
}
.sub {
float: left;
margin-left: -300px;
}
.foo {
display:block;
float: left;
text-decoration: none;
}
</style>
</head>
<body>
<a href="foo" Class="foo"><div class="Parent">foo </div></a>
<div class="sub"><a href="bar">Link text</a></div>
</body>
</html>

您确实意识到了用户混淆的巨大潜力。

嵌套的超链接区域，HTML源中没有嵌套的链接元素

5 个答案: