0

我用来创建页面菜单栏的样式表有问题。每当页面没有上一页或下一页时，单元格为空，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>
4

1 回答 1

0

确保您的空单元格&nbsp;中有占位符。

另外，尽量避免桌子......

编辑：

这是我的桌子现在的样子。永远不应该有表格会换行的地方，因为它只有一列并且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%;因为它意味着表格/行的整个宽度，而不是单元格。

于 2012-07-23T16:42:40.483 回答