Empty cells are moving around when empty

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%;，因爲它意味着表/行的整個寬度，而不是單元。