我正在开发一个网页，并决定使用CSS中的表格来创建我的导航栏；一切都很好，直到我带着电子邮件地址去牢房。单元格有点跳过一列。我的网页代码在下面，请帮忙。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="template.css">
<script type="text/javascript" src="action.js"></script>
<title>Danny Wong: Portfolio</title>
</head>
<body onload="cycleImage('latestImage');">
<div id="header">
<div id="navTableContainer">
<div class="navTableRow">
<div class="navContent">
<p class="paraLogo">Danny Wong Art</p>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Architectural Visualisation
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Envirnoment
</div>
</div>
<div class="navTableRow">
<div class="navContent">
<a href="design.html">Design</a>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
<a href="character.html">Character</a>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Digital Painting
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Development
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Resume
</div>
</div>
<div class="navTableRow">
<div class="navContent">
<a href="http://dintheart.tumblr.com/">Blog<a/>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
<a href="mailto:dwong219@gmail.com">test219@gmail.com</a>
</div>
</div>
</div>
</div>
<div id="main">
<img id="latestImage" src="" alt="image cycler" width="1000" height="600">
</div>
<div id="footer">
© 2014 Danny Wong
</div>
</body>
</html>
CSS：
@import url(http://fonts.googleapis.com/css?family=Freckle+Face);
body {
background-color: #000000;
color: #FFFFFF;
}
#header {
float: left;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: solid;
}
p.paraLogo {
font-family: "freckle face", serif;
font-size: 36px;
font-style: bold;
}
#navTableContainer {
display: table;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: dotted;
}
#navTableContainer a:hover {
color: red;
}
div.navTableRow {
display: table-row;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.navContent {
display: table-cell;
background-color: transparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid;
border-width: 2px;
text-align: center;
vertical-align: middle;
}
#main {
background-color: transparent;
width: 1000px;
height: 600px;
margin: -1% auto 0 auto;
padding: 0 0 0 0;
border-width: 0;
}
#footer {
background-color: transparent;
width: 200px;
margin: 0 auto 0 auto;
border-width: 0;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
这真的让我很紧张，我知道还有其他更好的方法，而且可能会使用它们，但我真的想知道为什么会发生这种情况，并且可以修复它，以备将来参考。
以下是我的操作方法：
HTML
<div id="header">
<ul>
<li class="paraLogo">Danny Wong Art</li>
<li>Architectural Visualisation</li>
<li>Envirnoment</li>
<li><a href="design.html">Design</a>
</li>
<li><a href="character.html">Character</a>
</li>
<li>Digital Painting</li>
<li>Development</li>
<li>Resume</li>
<li><a href="http://dintheart.tumblr.com/">Blog</a>
</li>
<li> <a href="mailto:dwong219@gmail.com">test219zgmail.com</a>
</li>
</ul>
</div>
<div id="main">
<img id="latestImage" src="" alt="image cycler" width="1000" height="600" />
</div>
<div id="footer">© 2014 Danny Wong</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Freckle+Face);
body {
background-color: #000000;
color: #FFFFFF;
}
#header {
float: left;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: solid;
}
#header li.paraLogo {
font-family:"freckle face", serif;
font-size: 36px;
font-style: bold;
padding: 1em 0;
}
#header ul {
background-color: tranparent;
list-style:none;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: dotted;
}
#header ul a:hover {
color: red;
}
#header li {
background-color: transparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid;
border-width: 2px;
text-align: center;
vertical-align: middle;
}
#main {
background-color: transparent;
width: 1000px;
height: 600px;
margin: -1% auto 0 auto;
padding: 0 0 0 0;
border-width: 0;
}
#footer {
background-color: transparent;
width: 200px;
margin: 0 auto 0 auto;
border-width: 0;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
示例：http://jsfiddle.net/ht5zH/2/
我知道我的答案对你没有太大帮助，也许我不理解你的所有需求，但我强烈建议你用display: table;以外的另一种方式设计菜单。UL列表对于HTML和CSS代码来说会更容易。