Html 在超链接区域中显示链接_Html_Css

Html 在超链接区域中显示链接

html css

Html 在超链接区域中显示链接,html,css,Html,Css,遇到了一个有趣的问题，我被难住了基本上，在我们的一个页面上，我们有几个超链接区域。这些区域不仅可以在有文本的地方单击，还可以通过使用display:block设置链接，在整个背景中单击。您可以看到这样一个可单击区域的简单示例所以最近，权力机构要求我在这一领域增加另一个环节。内部链接将有一个不同的目标到可点击区域，并且只可点击它的即时文本，其余的可点击区域将环绕它。您可以看到这两者是如何结合在一起的（黄色表示内部链接的可点击部分，红色表示外部链接）。注意：我意识到这看起来是一个非常混乱的实现

遇到了一个有趣的问题，我被难住了

基本上，在我们的一个页面上，我们有几个超链接区域。这些区域不仅可以在有文本的地方单击，还可以通过使用

display:block

设置链接，在整个背景中单击。您可以看到这样一个可单击区域的简单示例

所以最近，权力机构要求我在这一领域增加另一个环节。内部链接将有一个不同的目标到可点击区域，并且只可点击它的即时文本，其余的可点击区域将环绕它。您可以看到这两者是如何结合在一起的（黄色表示内部链接的可点击部分，红色表示外部链接）。 注意：我意识到这看起来是一个非常混乱的实现，但恐怕我无法控制

根据设计（出于充分的理由），我不能简单地嵌套我的

尝试这样嵌套标记会导致外部链接被第一个

实例过早关闭，如图所示

一种解决方案可能是将内部链接设置为span元素，然后使用onclick事件通过JavaScript执行超链接，但我不太了解这种方法，我更愿意避免任何JavaScript解决方法

我已经尝试了一些CSS等的解决方法，但到目前为止，我还没有成功。我有一种感觉，绝对定位或负边际可能是关键，但我从来都不擅长

如果有人能提供任何建议，我将不胜感激。

你不能嵌套链接。我的建议是将内部连接绝对放置在外部区域的顶部，有点像这样：

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>

您不能嵌套链接。我的建议是将内部连接绝对放置在外部区域的顶部，有点像这样：

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>

我会用div来包装你的链接。这就是你想要的吗

不能嵌套链接，但要使用绝对定位

<div id="wrapper">
  <a id="bigred" href="...">Big clickable area</a>
  <a id="yellow" href="...">Yellow background link</a>
</div>

这两个链接都可以点击。由于源顺序，黄色在红色的上方绘制。如果更改顺序，您将需要使用

z-index

来控制哪个显示在哪个显示的顶部。

您不能嵌套链接，而是使用绝对定位

<div id="wrapper">
  <a id="bigred" href="...">Big clickable area</a>
  <a id="yellow" href="...">Yellow background link</a>
</div>

这两个链接都可以点击。由于源顺序，黄色在红色的上方绘制。如果您更改顺序，则需要使用

z-index

来控制在其顶部显示的内容。

下面是一个工作示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>

    <div class="container">
        <a href="#" class="clickable_area">
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
        </a>
        <a class="inner_link" href="#">Yellow background and it's own link</a>
    </div>

</body>
</html>


a{文本装饰：无；背景色：红色}
.clickable_区域{显示：块；颜色：#000；填充底部：20px；}
.container{位置：相对；}
.内部链接{位置：绝对；底部：0px；背景色：黄色}

下面是一个工作示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>

    <div class="container">
        <a href="#" class="clickable_area">
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
        </a>
        <a class="inner_link" href="#">Yellow background and it's own link</a>
    </div>

</body>
</html>


a{文本装饰：无；背景色：红色}
.clickable_区域{显示：块；颜色：#000；填充底部：20px；}
.container{位置：相对；}
.内部链接{位置：绝对；底部：0px；背景色：黄色}

这不会有什么帮助，但像这样嵌套锚定将是无效的标记，并可能导致后续问题。我怀疑用传统的方法是不可能做到的，但人类中的神之家也是如此。如果可能的话，我还建议重新工作实现（即使用可点击的

div

，它可以很容易地以这种方式支持多个链接）（但也要理解“权力”的顽固性），这不会有帮助，但这样的嵌套锚定将是无效的标记，并可能导致进一步的问题。我怀疑用传统的方法是不可能做到的，但人类中的神之家也是如此。如果可能的话，我还建议重新实施（即使用可点击的

div

，它可以很容易地以这种方式支持多个链接）（但也要理解“权力”的顽固性）这将是一个正常的情况，但irishbuzz注意到以下几点：我意识到这看起来是一个非常混乱的实现，但我恐怕这不是我能控制的。出于设计（也是出于良好的理由），我不能简单地因为花时间回答问题而埋怨。除了Michael的评论之外，我还要补充一点：黄色的可点击区域只能覆盖第二个链接的文本，而红色背景必须填充右侧剩余的空间。这是正常情况，但irishbuzz注意到：我意识到这看起来是一个非常混乱的实现，但恐怕我无法控制。出于设计（也是出于良好的理由），我不能简单地因为花时间回答问题而埋怨。除了Michael的评论，我还要补充一点：黄色的可点击区域只能覆盖第二个链接的文本，而红色背景必须填充右侧剩余的空间。谢谢。这当然是一个可行的解决方案。我将把这个问题留一段时间，看看是否有人能找到更好的答案，但如果没有，我会接受。好的，这看起来确实是最好的答案。我上一篇评论中的演示在红色可点击区域元素上使用了

填充底部

，以便将区域拉伸到足以移动内部链接的程度。实际上，只需在可单击区域中添加一个额外的

就更容易了，因为这样也可以获得完美的空间。再次感谢迪奥德鲁斯·汉克斯·迪奥德鲁斯。这当然是一个可行的解决方案。我将把这个问题留一段时间，看看是否有人能找到更好的答案，但如果没有，我会接受。好的，这看起来确实是最好的答案。我上一篇评论中的演示在红色可点击区域元素上使用了

填充底部

，以便将区域拉伸到足以移动内部链接的程度。实际上，只需在可单击区域中添加一个额外的

就更容易了，因为这样也可以获得完美的空间。再次感谢迪奥多斯+