Question

我有一个简单的博客，其中包含三个导航链接 - 下一个，存档和之前的链接。当没有下一个或上一个帖子存在时，呈现博客的引擎将省略下一个或上一个链接。有没有办法确保删除或不影响其他两个的位置？

我尝试了几种方法，但我的档案链接总是偏离中心，朝着缺席链接的方向移动。

编辑：以下更多信息以回应Blender。抱歉没有现场演示。我会看到我能做些什么。

我的第一次尝试只是一个内联显示的列表，并以页面的主div为中心。然后我尝试将它拆开并在存档的左侧和右侧之前和之前浮动，当所有三个存在但是引起上述漂移时效果很好。我想要的是链接水平对齐但彼此独立，存档总是以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>

Answer 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，因为它包含浮动元素。

查看这个jsfiddle：http://jsfiddle.net/GcpJA/。

当一个或多个导航链接不存在时，保持导航链接的位置

1 个答案: