0

我目前正在为我的 Arma 2 部队（第 88 空降师）创建一个练习网站，我使用超链接的表头创建了一个简单的导航栏，但是表头之间的空间取决于单词的长度。有没有办法让标题之间的空间相等？

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>

代码：

*{
    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; }，或者，你可以th在 CSS中改变

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 回答