HTML - 表格內容對齊

Question

我正在開發基於網絡的遊戲。我做了導航，但文本沒有正確對齊。

HTML

<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr> 
<td height="23" class="header">Main Game</td> </tr> <tr> 
<td height="65" valign="top" class="cell" align="center"> <a href="home.php">Homepage</a>  <a href="staff.php">Staff Page</a> 
</td> </tr> <tr> 
<td height="23" class="header">Social</td> </tr> <tr> 
<td height="65" valign="top" class="cell"><a href="forum.php">Discussions</a></td> </tr> <tr> 
<td height="23" class="header">LogOut</td> </tr> </table> 

CSS

.table { 
    border:#000000 1px solid; background-color:#363636; 
} 

.cell { 
    color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center; 
} 

.header { 
    padding:0px; padding-left:2px; color:#FFFFFF; 
    background:#3A0D07; font-family:verdana; font-size:10px; 
    line-height:18px; text-align:left; border-bottom:2px solid; 
    border-color:#000000; align:center; 
} 

輸出

Answer 1

爲您的代碼，錨標記默認顯示inline-block

速戰速決，爲你的代碼是改變顯示a標籤，向您添加以下內容r css：

.table .a{ 
    display:block; 
} 

Answer 2

而不是表格，你應該使用列表項目，因爲它們在每個瀏覽器中呈現相同。你也可以更好地控制if。

HTML

<ul class="nav"> 
<li>Home</li> 
<li>Stuff</li> 
<li>About</li> 
</ul> 

CSS

ul { 
list-style-type: none; 
}