辅助导航链接(绝对和相对定位) (CSS)
辅助导航链接(绝对和相对定位) (CSS)
提问于 2019-08-14 02:31:29
我所有的辅助标题导航链接只能去(左上角，左下角，右上角等等)。
目前启用为“左上角”，但我希望这四个链接中的两个是“右上”。
目前的代码工作完美，除了75%的大小标记后，链接混乱。
@media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-19 14:31:11
有人说using absolute positioning within flex-box will not work reliably。我会猜到，因为我在Firefox和Chrome中查看了您的站点，而没有看到问题，所以您在Safari中查看您的站点，在那里可以看到问题。
无论如何，由于上述原因，我建议使用Javascript将导航项移动到所需的位置。然后，添加一些额外的CSS，以使那些新移动的项目看起来像其他。
首先，删除您添加的用于解决这些导航项的CSS。
然后通过站点范围内的页脚代码注入添加此内容：
<script>
(function() {
var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
var i;
for (i=0; i<targetLinks.length; i++) {
targetParent.appendChild(targetLinks[i]);
}
})();
</script>最后，通过CSS编辑器添加以下内容：
body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
margin: 0 .618em;
padding: .618em 0;
font-family: myriad-pro;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
display: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57487479
复制相关文章
相似问题
腾讯云开发者
