Question

编辑：现在代码在底部。

仍在研究这个Tumblr主题并且我能够取得很多进展，但现在我遇到了另一个问题。

固定的topbar元素用作主题（或主导航，无论如何）的导航，并以以下模式设置：链接，链接，博客标题，链接，链接。

以前我将此导航区域标记为列表，但列表难以设置样式，这使得难以获得所需的外观（即每个链接都是自己的框，具有自己的背景和标题就在他们之间）。所以我把它改成了一个表，因为我认为一个表可以很好地满足我的需求，而且我一直非常善于使用编码表。这样做解决了我一直遇到的一个问题，但现在已经造成了两个问题。

现在的问题是，不仅试图在单元之间获得空间不可能，而且它们也不能正常显示。标题是它需要的地方，但是表格（因为我必须制作两个单独的表才能使它工作）是垂直堆叠而不是水平显示。

我尝试了很多解决方案，包括填充和边距属性，这些解决方案都没有我需要的间距，以及边框折叠和边框间距属性，两者都没有做任何事情。我尝试让第一个表浮动到左边，然后修复它的显示，但结果却以某种方式擦除了它的背景颜色。我宁愿避免在这个主题中使用更多浮动元素，因为它的两个主要列已经浮动。

我还想到了其他可能需要重新编码的解决方案，例如将每个链接设置为带有块显示的框或者再次将其设为列表但是有两个单独的列表而不是一个完整列表，但是我我不确定哪种解决方案效率最高。

如果有人能给我一些见解，我会很感激。

This is the current WIP live preview of the theme（密码“Asbel”没有引号）。

And this is what it's supposed to look like as per my sketch（导航框在实践中是无边框的，为了我的理智，它们在草图上只有边框）。

现在，HTML5一般都是禁止使用的表吗？我注意到当我在W3schools筛选可能的解决方案时，大多数表属性已被编辑，这使得表格更难以制作和使用。我需要知道，因为我正在计划使用3列，两个划线表来设置此主题的页面链接，但如果我再次遇到此问题，我将不得不重新考虑它....

- 代码 -

HTML：

<header class="topbar">
        <div id="button">
            <div class="table1">
                <table colspan="2">
                    <td>
                        <a href="/">Home</a>
                    </td>
                    {block:AskEnabled}
                        <td>
                            <a href="/ask">{AskLabel}</a>
                        </td>
                    {/block:AskEnabled}
                </table>
            </div>
        </div>
            <h1 style="text-align:center; font-size:1.000em;">{Title}</h1>
        <div id="button">
            <div class="table2">
                <table colspan="2">
                    <td>
                        <a href="/archive">Archive</a>
                    </td>
                    <td>
                        <a href="http://guardianoftime.tumblr.com">Theme</a>
                    </td>
                </table>
            </div>
        </div>
    </header>

CSS：

.topbar {
        background: {color:TopBarBG};
        color: {color:TBText};
        position: fixed;
        width:100%;
    }

    #button {
        background: {color:TopBarButtonBG};
        color: {color:TBButtonText};
        text-align:center;
        width:75%;
    }

    .table1 table {
        border:0%;
        width:25%;
    }

    .table1 td {
        border:0%;
        width:10%;
        text-align:center;
        vertical-align:middle;
        padding:3%;
    }

表格单元格与CSS没有正确间距

0 个答案: