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 がありますが、この場合は問題ではなく、その中に 2 つのスパンがあります。次の前の記事がない場合、オプションは表示されません。次に 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ためにそこに保持することが非常に重要であるため、 を含めました。float を使用しないと整列display:blockできません。1 行下に移動します。おそらく問題は にありますが、確かなことはわかりません。.next.prevem

前後の記事があれば魅力的な作品です。前の記事だけなら.nextちゃんと立ちますが、次の記事だけだとうまく並びません。

実際の例については、このページの下部をご覧ください。

4

2 に答える 2

1

あなたの問題は、あなたの.paginationクラスが 1 つだけのフローティング div でクリアされていないことです。

CSSoverflow: 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 に答える