Question

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

HTML CODE：

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

    }

enter image description here

Answer 1

由于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%;
}

为您提供更灵活的尺寸。另外，我不知道你是否有任何额外的边框或边距。如果是这样的话，td s将不适合25％（因为尺寸是在没有边距，填充和边框的情况下测量的），所以要玩它（降低百分比直到你看起来正确）。

表头之间的相等空间

1 个答案: