0

私はウェブベースのゲームに取り組んでいます。ナビゲーションを作成しましたが、テキストが正しく配置されていません。

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;
 }

出力

ここに画像の説明を入力

4

2 に答える 2

0

すべてのブラウザーで同じようにレンダリングされるため、テーブルの代わりにリスト項目を使用する必要があります。また、if をより適切に制御できます。

HTML

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

CSS

ul {
 list-style-type: none;
}
于 2012-11-11T14:20:59.037 に答える
0

あなたのコードでは、デフォルトでアンカータグが表示さinline-blockれます

コードの簡単な修正は、aタグの表示を変更することです。css に次を追加します。

.table .a{
   display:block;
}
于 2012-11-11T14:23:28.037 に答える