问题描述
我想要一个包含图像的div和一些文本作为链接。因此，人们可以点击div中的任何地方（不一定是图像或文本）并被带到一个位置。不过，我还希望在文本结尾处有另一个链接，将用户带到另一个位置。但是，一旦我添加第二个链接，整个div不再是链接，只是图像和文本是链接。是我想做的事情吗？
I would like to have a div that contains an image and some text be a link. So that one can click anywhere (not necessarily the image or text) in the div and be taken to one location. However I would also like there to be another link at the end of the text that brings the user to another location. However, once I add this second link the whole div no longer is a link and just the image and text are links. Is what I am want to do possible?
推荐答案
在HTML中是不可能的，因为 a a 元素中的元素是不允许的。通过现有的HTML规范，你不能在 a 中有 div ，但这个限制从来没有被浏览器强制执行过并且已经在HTML5草案中取消。嵌套 a 元素是一个不同的问题，因为它会在活动中创建一个活动区域，并且它的含义需要定义并且会令人困惑。
It is not possible in HTML, since an a element inside an a element is not allowed. By existing HTML specs, you cannot have e.g, div inside a either, but this restriction was never really enforced by browsers and it has been lifted in HTML5 drafts. Nested a elements are a different issue, since it would create an active area inside an active, and its meaning would need to be defined and it would be confusing.
练习时会发生什么？使用
What happens in practice when using
<a href=foo>bla bla <a href=bar>inner link</a> stuff</a>
是它按照你想要的方式工作，除了外部 a的内容内部 a 元素之后的元素根本不是链接。显然，浏览器不准备像这样处理结构。实际上，当它们遇到< a> 标签时，它们意味着关闭< / a> a 元素已打开。就像他们为 p 元素所做的一样。
is that it works the way you want except that content of the outer a element after the inner a element is not a link at all. Apparently browsers are not prepared to handling constructs like this. Effectively, they imply a closing </a> tag when they encounter an <a> tag when an a element is open. Much like they do for p elements.
因此，链接末尾的内部链接将排序工作。当然不能保证它可以在未来版本的浏览器中继续工作，或者它可以在所有浏览器上运行。
So an inner link at the end of a link would sort-of work. There is of course no guarantee that it will keep working in future versions of browsers, or that it works on all browsers.
您可以使用两个单独的非嵌套 a 元素，并使用CSS定位将第二个元素视觉化地放置在第一个元素内。但是这会变得有些复杂。更简单的方法是设置一个JavaScript伪链接：
You could use two separate, non-nested a elements in succession and to place the second one visually inside the first one, using CSS positioning. But this would get somewhat complicated. A much simpler approach is to set up a JavaScript pseudo-link:
<span onclick="document.location.href = 'foo'; return false">inner link</span>
缺点是，禁用JavaScript时，它不会以类似链接的方式进行操作，搜索引擎不会将其视为链接。
The downside is that it won’t act in a link-like manner when JavaScript is disabled, and search engines won’t treat it as a link either.
这篇关于链接在一个div链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！