0

現在、Arma 2 Unit（88th Airborne Divsion）の練習用Webサイトを作成しています。ハイパーリンクされたテーブルヘッダーを使用してシンプルなナビゲーションバーを作成しましたが、テーブルヘッダー間のスペースは、単語の長さによって異なります。ヘッダー間に等間隔を作る方法はありますか？

HTMLコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
  <div id="navbar"><table width="680" border="0">
  <tr>
    <th>Home</th>
    <th>About Us</th>
    <th>Members</th>
    <th>Apply</th>
  </tr>
</table>
</div>
</div>
</body>
</html>

CSSコード：

*{
    margin:0;


    }

#container {
    height: 100%;
    width: 100%;
}
#banner {
    height: 125px;
    width: 680px;
    margin-left:auto;
    margin-right:auto;
}


#navbar {
    background-color:#333;
    width: 680px;
    height:25px;
    margin-right: auto;
    margin-left: auto;
    text-align:center;
}
th{
    border-right-width:medium;
    border-right-color:#000;
    border-right-style:groove;

    }

ここに画像の説明を入力してください

4

1 に答える 1

2

のためにtable width=680、CSSに入れることができtr{ width: 170px; }ます、または、CSSで変更することができthます

tr{  
    position: relative; /* you may put it out, maybe it will work without it */
}

th{
    border-right-width:medium;
    border-right-color:#000;
    border-right-style:groove;
    width: 25%;
}

これにより、より柔軟なサイズ設定が可能になります。また、追加の境界線や余白があるかどうかもわかりません。もしそうなら、tdsはその25％に収まりません（寸法はマージン、パディング、ボーダーなしで測定されるため）、それで遊んでください（正しい外観になるまでパーセンテージを下げてください）。

于 2013-03-25T02:09:01.507 に答える