php - 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

您应该使用列表项而不是表格，因为它们在每个浏览器中呈现相同。此外，您可以更好地控制是否。

HTML

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

CSS

ul {
 list-style-type: none;
}

Answer 2

inline-block对于您的代码，默认情况下会显示锚标记

您的代码的快速修复是更改a标签的显示，将以下内容添加到您的 css：

.table .a{
   display:block;
}