空单元格在空时移动

Question

我的样式表有问题，我用它来创建页面菜单栏。每当页面没有上一页或下一页时，单元格为空，CSS仅应用背景图像。每当我尝试实现此解决方案时，组成菜单栏的单元格都会移动，并且所有内容都不再对齐。我需要帮助才能找出解决这个问题的方法。

以下是已应用于图像中显示为灰色后退按钮的空单元格的类。

td.menu-back-disabled {
    background-image: url('back_first.png');
    display: block;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 85px;    
}
li.menu-bar {
    list-style-type: none;
    background-image: url('top.png');
    background-repeat: repeat-x;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    height: 34px;
    width: 100%;
}

这是菜单栏的html：

<table class="menu">
<br>
<tr>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=environment" class="menu-home">
</a>
</td>
<td class="menu-edit-selected">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=upload&number=1&filter=1" class="menu-upload">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=comments" class="menu-comments">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=log&number=1" class="menu-log">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=stats&number=1" class="menu-stats">
</a>
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=settings" class="menu-settings">
</a>
</td>
<td class="menu-bar">
</td>
<td class="menu-bar-right">
</td>
<td class="menu-back-disabled">
</td>
<td>
<a href="https://peter-larsens-macbook.local:8081/cgi-bin/display?page=edit&number=2&filter=1" class="menu-next">
</a>
</td>
</tr>
</table>

Answer 1

确保空单元格中的 为占位符。

另外，尽量避免使用表格...

修改

这是我的表当前的样子。永远不应该有一个表将换行到新行的地方，因为它只有一列width:100%;

<强> CSS：

    <style type="text/css">
        #menu {
            width:100%;
        }
        #menu td {
            text-align:center;
        }
        .menu-bar {
            width:30%;
        }
    </style>

<强> HTML：

    <table cellspacing="0" cellpadding="0" id="menu">
        <tr>
            <td>
                <a href="#" class="menu-home">Home</a>
            </td>
            <td class="menu-edit-selected">
                <a href="#" class="menu-home">Edit</a>
            </td>
            <td>
                <a href="#" class="menu-upload">Upload</a>
            </td>
            <td>
            <a href="#" class="menu-comments">Comments</a>
            </td>
            <td>
                <a href="#" class="menu-log">Log</a>
            </td>
            <td>
                <a href="#" class="menu-stats">Statistics</a>
            </td>
            <td>
                <a href="#" class="menu-settings">Settings</a>
            </td>
            <td class="menu-bar">&nbsp;</td>
            <td class="menu-bar-right">&nbsp;</td>
            <td class="menu-back-disabled">
                <a href="#" class="menu-next">Back</a>
            </td>
            <td>
                <a href="#" class="menu-next">Next</a>
            </td>
        </tr>
    </table>

此处的任何更改可能来自填充，边距或设置宽度。 td.menu-bar和/或td.menu-bar-right无法设置为width:100%;，因为它表示表/行的整个宽度，而不是单元格。