0 
<div class="pagination">
    <?php if($page->hasPrevVisible()): ?>
    <span class="prev">
        <em>Previous Article</em>
        <a href="<?php echo $page->prevVisible()->url() ?>"><?php echo $page->prevVisible()->title() ?></a>
    </span>
    <?php endif ?>

    <?php if($page->hasNextVisible()): ?>
    <span class="next">
        <em>Next Article</em>
        <a href="<?php echo $page->nextVisible()->url() ?>"><?php echo $page->nextVisible()->title() ?></a>
    </span>
    <?php endif ?>  
</div>

基本上，这就是我的文章观点。有主 div，对于这种情况和两个跨度无关紧要。当没有下一篇我们的上一篇文章时，该选项不会出现。现在到 CSS：

.pagination em {
font-family: Arvo;
font-size: .8em;
font-style: normal;
text-transform: uppercase;
display: block;
color: #838383;
}

.prev {
width: 49%;
display: inline-block;
}

.next {
width: 49%;
text-align: right;
float: right;
}

我已经包括了，.pagination em因为保留它对我来说非常重要display:block。如果不使用浮点数，我无法.next对齐.prev，它会向下一行。所以也许问题出在 中em，但我不确定。

如果有上一篇和下一篇文章，它就像一个魅力。如果只有上一篇文章，它也很完美，但是，如果只有下一篇文章，.next将无法正确对齐。

有关实际示例，请查看本页底部。

4

2 回答 2

1

你的问题是你的.pagination班级没有被清除，只有一个浮动的 div 。

如果您只是在 CSS 中添加overflow: auto;类.pagination，它应该可以解决问题。

.pagination {
    padding: 1.25em 0px;
    font-size: 0.8em;
    line-height: 1.2em;
    border-bottom: 0.07143em solid rgb(55, 185, 81);
    font-family: "Elena Web",Georgia;

    overflow: auto;
}

示例：http ://cssdesk.com/q2h4U


希望这会有所帮助，祝你好运！

于 2013-05-03T04:35:47.787 回答
-1

float会将元素浮动到父级的“内部”维度之外，这意味着在计算父级的大小时不会考虑其大小。

您可以display:inline-block在两侧使用，并span在只有一侧存在时使用假人：

http://jsfiddle.net/WR6cy/

<!-- when both sides present -->
<div class="pagination">
    <span class="prev">
        <em>Previous Article</em>
        <a href="#">Previous Title</a>
    </span>
    <span class="next">
        <em>Next Article</em>
        <a href="#">Next Title</a>
    </span>
</div>

<!-- when only prev side presents -->
<div class="pagination">
    <span class="prev">
        <em>Previous Article</em>
        <a href="#">Previous Title</a>
    </span>
</div>

<!-- when only next side presents, use a dummy prev side to "push" the next -->
<div class="pagination">
    <span class="prev">
    </span>
    <span class="next">
        <em>Next Article</em>
        <a href="#">Next Title</a>
    </span>
</div>

.prev {
    width: 49%;
    display: inline-block;
}
.next {
    width: 49%;
    text-align: right;
/*    float: right;*/
    display:inline-block;
}

编辑：

要使用您当前的 PHP 实现此目的，您可以将其稍微修改为：

<div class="pagination">
    <span class="prev">
    <?php if($page->hasPrevVisible()): ?>
        <em>Previous Article</em>
        <a href="<?php echo $page->prevVisible()->url() ?>"><?php echo $page->prevVisible()->title() ?></a>
    <?php endif ?>
    </span>

    <span class="next">
    <?php if($page->hasNextVisible()): ?>
        <em>Next Article</em>
        <a href="<?php echo $page->nextVisible()->url() ?>"><?php echo $page->nextVisible()->title() ?></a>
    <?php endif ?>  
    </span>
</div>
于 2013-05-03T04:31:15.660 回答