英文:
How to fix multiple anchors leading to the same link error in Django?
问题
两个锚点都链接到导致堆栈溢出页面的 href。仅供参考,(以防这是一个混淆变量),我正在使用 Django 环境,如果有什么特殊含义的话。
<div>
<a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id=1>
Something1
</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id=2>
Something2
</a>
</div>
我最初尝试使用 Django 变量,但后来切换到这两个链接以进行调试。仍然存在两个锚点都导向后一个 href 的类似问题。我对此不太了解,所以需要一些帮助,谢谢。
英文:
Both of the anchors links to the href that leads to the stack overflow page. For reference, (in case this is a confounding variable), I'm using the django environment if that means anything.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div>
<a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id=1>
Something1
</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id=2>
Something2
</a>
</div>
<!-- end snippet -->
I initially tried using django variables but later swapped to these 2 links in order to debugg it. It still had the similar issue of both anchors leading to the latter href. I'm pretty new to this so I need a bit of help, thank you.
答案1
得分: 0
你将它们都定位在底部,宽度为100%。这意味着它们将重叠在一起。而且它们确实如此,因此只有顶部的一个会拦截重叠部分的点击。
如果您向锚点添加半透明背景,您将看到正在发生的重叠。
a {
background: rgba(0, 0, 0, 0.15);
}
<div>
<a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id="1">
Something1
</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id="2">
Something2
</a>
</div>
较暗的部分是重叠区域。
也许像下面这样的解决方案是您要实现的,其中我将整个容器移到底部并样式化元素以在它们之间分割可用空间(使用flex)。
.bottom-links {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
display: flex;
text-align: center;
}
.bottom-links a {
flex: 1;
}
<div class="bottom-links">
<a href="https://www.w3schools.com/tryit/" id="1">Something1</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" id="2">Something2</a>
</div>
英文:
You are positioning them both at the bottom with width 100%. This means that they will be overlapping. And they are, and so only the top one will intercept the clicks for the overlapping section.
If you add a semi transparent background to the anchors you will see the overlap that is happening
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a{
background:rgba(0,0,0,0.15);
}
<!-- language: lang-html -->
<div>
<a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id=1>
Something1
</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id=2>
Something2
</a>
</div>
<!-- end snippet -->
The darker are is the overlap.
Perhaps a solution like the following, where i move the whole container to the bottom and style the elements to split the available space between them (using flex) is what you are trying to achieve.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bottom-links {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
display:flex;
text-align:center;
}
.bottom-links a{
flex: 1;
}
<!-- language: lang-html -->
<div class="bottom-links">
<a href="https://www.w3schools.com/tryit/" id="1">Something1</a>
<a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" id="2">Something2</a>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论