Question

一点背景（相信我，这很重要）。我经营一个网站，每天都会发布一个新故事。我使用博客是因为它是免费的，它主要是我得到了我需要的东西。我的大多数故事都以某种方式与其他故事相关联，实际上，通常与之前发布的故事有关。例如，我现在有一个121个更大的故事，顺序很重要。你应该在阅读下一篇文章之前阅读一本，所以我的导航解决方案已经是＆＃34;点击此处阅读上一部分＆＃34;在顶部，＆＃34;点击此处阅读下一部分＆＃34;在底部。嗯，这有点混乱，业余，所以我在＆＃34;之前＆＃34;和＆＃34; next＆＃34;按钮而不是。现在，他们看起来很棒。我有他们想要的方式（在角落里），但只任何故事不仅是一个更大的系列的一部分，但也是一系列系列的一部分。解释，＆＃34;某事开始的第二阶段＆＃34;有13个部分，但它是续集到＆＃34;看到成为＆＃34;和前传到＆＃34; Voyage to Saga＆＃34;。我希望读者能够导航到其他系列。这意味着我需要＆＃34;上一个/下一个分期付款的按钮＆＃34; plus ＆＃34;上一个/下一个系列＆＃34;。好的，这样就可以了。我只是使用CSS将它们放置在我想要的地方，也许不是以最复杂的方式，而是先前的＆＃34;按钮在左边是彼此相邻的，＆＃34; next＆＃34;按钮在右侧彼此相邻，这是您期望它们的位置。

Navigation buttons

这就是事情，不是每个系列都连接到另一个系列，这意味着我不想要＆＃34;上一个/下一个系列＆＃34;那些页面上的按钮。但我想为这些页面使用相同的CSS，因为我只编写了一次代码，并将其打到主样式表上。问题是，一旦我删除＆＃34;下一个系列＆＃34;按钮，＆＃34;下一部分＆＃34;按钮不会移动到它所属的右上角，因为我已经告诉CSS将它定位在距离它45个像素的位置，因为当＆＃需要它时＃ 34;下一个系列＆＃34;按钮是应该在角落里的按钮。基本上，我想说的是＆＃34;把这个45像素远离边缘，因为那里已经有一个按钮了。但如果我不在那里放另一个按钮，请把它放在边缘的地方。＆＃34;

这是我的CSS：

@keyframes previousseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousseries {
    margin-left: 0;
}

a.previousseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousseries:hover {
    animation-name: previousseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}

@keyframes previousinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousinstallment {
    margin-left: 0;
}

a.previousinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousinstallment:hover {
    animation-name: previousinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes entirestory {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.entirestory {
    position: absolute;
    left: 50%;
    margin-left: -79px
}

a.entirestory {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.entirestory:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes toc {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.toc {
    position: absolute;
    left: 50%;
    margin-left: -110px
}

a.toc {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.toc:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes nextinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextinstallment {
    position: absolute;
    right: 45px;
}

a.nextinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextinstallment:hover {
    animation-name: nextinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes nextseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextseries {
    position: absolute;
    right: 0;
}

a.nextseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextseries:hover {
    animation-name:  nextseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

这是其中一个页面上的HTML，我想复制/粘贴到类似的页面，而不需要编辑太多：

<h2>
<span style="font-weight: normal;">
<a class="previousseries" href="http://www.nickfisherman.com/2016/02/the-odds-eleven-part-i.html" title="Previous Series">«</a>
<a class="previousinstallment" href="http://www.nickfisherman.com/2016/02/the-odds-eleven-part-i.html" title="Previous Installment">&lt;</a>
<a class="entirestory" href="http://www.nickfisherman.com/p/the-odds-entire-story.html" title="Entire Story">Entire Story</a>
<a class="nextinstallment" href="http://www.nickfisherman.com/2016/03/the-odds-forty-two-part-iii.html" title="Next Installment">&gt;</a>
<a class="nextseries" href="http://www.nickfisherman.com/2016/03/the-odds-forty-two-part-iii.html" title="Next Series">»</a>
</span></h2>

这可能吗？我可以简单地复制和粘贴我需要的链接，只能复制和粘贴我需要的链接，同时强制执行＆＃34;下一部分＆＃34;按钮移动到角落？如果您需要进一步澄清，或者如果我所说的一切只是毫无意义，请告诉我。这是我的第一次求助。

Answer 1

要达到你想要的效果，不要使用绝对定位，而是将两个“下一个”链接浮动到右边。

/**
 * Merges two strings in a way that a pattern like ABABAB will be
 * the result.
 *
 * @param     string    $str1   String A
 * @param     string    $str2   String B
 * @return    string    Merged string
 */  
function MergeBetween($str1, $str2){

    // Split both strings
    $str1 = str_split($str1, 1);
    $str2 = str_split($str2, 1);

    // Swap variables if string 1 is larger than string 2
    if (count($str1) >= count($str2))
        list($str1, $str2) = array($str2, $str1);

    // Append the shorter string to the longer string
    for($x=0; $x < count($str1); $x++)
        $str2[$x] .= $str1[$x];

    return implode('', $str2);
}

@keyframes previousseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousseries {
    margin-left: 0;
}

a.previousseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousseries:hover {
    animation-name: previousseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}

@keyframes previousinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousinstallment {
    margin-left: 0;
}

a.previousinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousinstallment:hover {
    animation-name: previousinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes entirestory {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.entirestory {
    position: absolute;
    left: 50%;
    margin-left: -79px
}

a.entirestory {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.entirestory:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes toc {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.toc {
    position: absolute;
    left: 50%;
    margin-left: -110px
}

a.toc {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.toc:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes nextinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextinstallment {
    float:right; /* changed */
}

a.nextinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextinstallment:hover {
    animation-name: nextinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes nextseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextseries {
    float:right; /* changed */
}

a.nextseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextseries:hover {
    animation-name:  nextseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
h2 {
  overflow-x:hidden; /* added to suppress scrollbar when hovering */
}

就是这样。请注意，我还必须更改链接本身的顺序不需要清除，因为左侧的链接不是浮动的，因此h2已经具有正确的高度，并且下面的内容最终位于相同的位置。

为了表明它按预期工作，这里删除了外部链接的相同来源：

<h2>
<span style="font-weight: normal;">
<a class="previousseries" href="http://www.nickfisherman.com/2016/02/the-odds-eleven-part-i.html" title="Previous Series">«</a>
<a class="previousinstallment" href="http://www.nickfisherman.com/2016/02/the-odds-eleven-part-i.html" title="Previous Installment">&lt;</a>
<!-- Switched the order for those around -->
<a class="nextseries" href="http://www.nickfisherman.com/2016/03/the-odds-forty-two-part-iii.html" title="Next Series">»</a>
<a class="nextinstallment" href="http://www.nickfisherman.com/2016/03/the-odds-forty-two-part-iii.html" title="Next Installment">&gt;</a>
<a class="entirestory" href="http://www.nickfisherman.com/p/the-odds-entire-story.html" title="Entire Story">Entire Story</a>
</span></h2>

@keyframes previousseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousseries {
    margin-left: 0;
}

a.previousseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousseries:hover {
    animation-name: previousseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}

@keyframes previousinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-15px);
    }
    100% {
    transform: translateX(0);
    }
}

.previousinstallment {
    margin-left: 0;
}

a.previousinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.previousinstallment:hover {
    animation-name: previousinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes entirestory {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.entirestory {
    position: absolute;
    left: 50%;
    margin-left: -79px
}

a.entirestory {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.entirestory:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes toc {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.toc {
    position: absolute;
    left: 50%;
    margin-left: -110px
}

a.toc {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.toc:hover {
    animation-name: entirestory;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}

@keyframes nextinstallment {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextinstallment {
    float:right; /* changed */
}

a.nextinstallment {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextinstallment:hover {
    animation-name: nextinstallment;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes nextseries {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
    transform: translateX(0);
    }
}

.nextseries {
    float:right; /* changed */
}

a.nextseries {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
}

a.nextseries:hover {
    animation-name:  nextseries;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
h2 {
  overflow-x:hidden; /* added to suppress scrollbar when hovering */
}

使用CSS相对于不会始终存在的第二个元素定位元素

1 个答案: