當缺少一個或多個導航鏈接時，保持導航鏈接的位置

我有一個包含三個導航鏈接的簡單博客 - 接下來是存檔和以前的鏈接。當沒有下一個或上一個帖子存在時，呈現博客的引擎將忽略下一個或上一個鏈接。有沒有辦法確保移除或者不會影響其他兩個的位置？當缺少一個或多個導航鏈接時，保持導航鏈接的位置

我試過了幾種方法，但我的存檔鏈接總是偏離中心的方向缺席的鏈接。

編輯：更多信息請參閱Blender。對沒有現場演示的道歉。我會看看我能做什麼。

我的第一次嘗試只是一個列表顯示內聯和居中在頁面的主div。然後，我試圖將它拆開，然後在存檔的左側和右側進行浮動，當所有三個存在時都運行良好，但導致上述漂移。我想要的是鏈接水平對齊但彼此獨立，存檔始終以div爲中心。

從我鯖模板，後者嘗試（與浮子）：

<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>

來源

2012-08-13 AndrewE

沒有任何問題的可視化（現場演示是首選），任何人都無法幫助您。 – Blender 2012-08-13 02:05:46

要擴展@Blender的評論，我們需要知道博客引擎爲導航鏈接呈現的HTML。優選地，當全部3個元素存在時以及當它們不存在時。 – 2012-08-13 02:21:58

我會改變你的代碼，這樣，而不是刪除的元素，只是刪除文本：

<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，因爲它包含浮動元素。

看看這個jsfiddle：http://jsfiddle.net/GcpJA/。

來源

2012-08-13 04:01:21 Jeemusu

謝謝，它工作。我還用'text-align：center;'將導航鏈接置於各自框內。身高也是一個至關重要的特性，因爲如果沒有它，其他漂浮物就會穿過它。對於mako的用戶來說，控制語句只有在線上的第一個文本時纔有效，儘管它們之前可以有任意數量的空格。 – AndrewE 2012-08-14 04:12:01

當缺少一個或多個導航鏈接時，保持導航鏈接的位置

回答

相關問題