0

次、アーカイブ、前の3つのナビゲーションリンクがある簡単なブログがあります。ブログをレンダリングするエンジンは、次または前の投稿が存在しない場合、次または前のリンクを除外します。削除またはいずれかが他の2つの配置に影響を与えないようにする方法はありますか？

私はいくつかの方法を試しましたが、私のアーカイブリンクは常にリンクがない方向に中心からずれています。

編集： Blenderに応じて以下の詳細情報。ライブデモがないことをお詫びします。何ができるか見ていきます。

私の最初の試みは、ページのメインdivの中央にインラインで表示されたリストだけでした。次に、それを分解して、アーカイブの左右の前後に浮かせてみました。これは、3つすべてが存在する場合はうまく機能しましたが、上記のドリフトを引き起こしました。私が欲しいのは、リンクを水平方向に整列させ、互いに独立させ、アーカイブを常にdivの中央に配置することです。

私のmakoテンプレートから、後者の試み（フロートを使用）：

<div id="navigation">
% if prev_post:
    <a id="prev" href="${prev_post.permapath()}">&#60;&#60;Prev</a>
% endif
% if next_post:
    <a id="next" href="${next_post.permapath()}">Next&#62;&#62;</a>
% endif
    <a id="archive" href="/archive">Archive</a>
</div>
4

1 に答える 1

1

要素を削除する代わりに、テキストを削除するようにコードを変更します。

<div id="navigation">

    <a id="prev" href="${prev_post.permapath()}"> % if prev_post: &#60;&#60; Prev% endif </a>


    <a id="next" href="${next_post.permapath()}"> % if next_post: Next&#62;&#62; % endif </a>

    <a id="archive" href="/archive">Archive</a>
</div>

これで、CSSを使用してアンカーに幅を設定できます。

a {
    width: 60px; 
    height: 20px;   
    display: block; 
    float:left;    
}

divには浮動要素が含まれているため、divをクリアする必要があることを忘れないでください。

このjsfiddleをチェックしてください：http：//jsfiddle.net/GcpJA/。

于 2012-08-13T04:01:21.480 に答える