在过去的几周里，我一直在花一些时间来更新我的 HTML/CSS 知识。因此，我一直在学习如何实现我以前使用表格完成的布局，而不是使用 DIV。
在大多数情况下它都很好，但我遇到了一些障碍，试图复制一种使用以下代码作为表格的导航菜单样式：
HTML：
<div class="navigation">
<table>
<tr>
<td><a href="index.php">home</a></td>
<td> </td>
<td><a href="about.php">about</a></td>
<td> </td>
<td><a href="music.php">music</a></td>
<td> </td>
<td><a href="geeking.php">geeking</a></td>
<td> </td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>
</div>
CSS：
div.navigation{
text-align: center;
color: hsla(200,50%,45%,0.6);
margin: auto;
font-family: monospace;
letter-spacing: 2px;
position: relative;
top: -13px;
margin: 20px auto 20px auto;
width: 60%;
}
.navigation table{
height: 70px;
}
th{
text-align: center;
color: hsla(180,50%,45%,0.4);
font-size: 1.1em;
}
table{
border-collapse: collapse;
margin: auto;
margin-top: 0px;
}
table,th{
border: 0px solid black;
padding: 5px;
}
.navigation a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
background-color: transparent, white;
text-transform: lowercase;
font-size: 1.2em;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
letter-spacing: 0px;
width: 50px;
height: 100px;
}
.navigation a:hover{
color: white;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
width: auto;
height: auto;
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}
您可以在此处实时查看此页面：http: //benjaminsherwood.co.uk/index.php 要清楚 - 这是我希望我的菜单的行为 - 用于增加大小和字母间距的悬停元素, 并左右推动其他元素，但保持在同一垂直平面上。这是我坚持的垂直平原部分。
这是我用来尝试使用 DIV 创建相同菜单的代码：
HTML：
<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Music</a></li>
<li><a href="">Geeking</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS：
.menu{
position: fixed;
left:0;
right:0;
top:0;
margin: auto;
text-transform: lowercase;
text-align: center;
}
.navigation table{
height: 70px;
}
.menu li{
list-style: none outside none;
display: inline;
}
.menu a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
font-size: 1.2em;
letter-spacing: 0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.menu a:hover{
color: white;
font-size: 2em;
font-weight: 600;
letter-spacing: 2px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
text-shadow: 0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}
您可以在此处实时查看此页面：http: //benjaminsherwood.co.uk/test.php
我整个周末都在试图解决这个问题——我一直在寻找解决方案，并应用了不同的方法来创建水平菜单布局，甚至最终去找了一个非常擅长 CSS 的朋友——但是，无论我尝试什么，我都无法弄清楚如何以与 TABLE 相同的方式实现基于 DIV 的布局。
就好像基于 TABLE 的布局是从 TD 元素的中心对元素应用更改，而基于 DIV 的布局是从顶角应用它。结果，基于 DIV 的布局似乎只是向下增长，而不是扩展，因此，它两侧的元素不会在同一水平面上向左和向右流动，就像TABLE 布局，而是向左或向右推，也向下推。
老实说 - 我知道解决方案很可能是要么接受它在 DIV 样式中的不同工作方式，要么继续使用 TABLE 样式......但我相信这应该是可能的，而且我我只是错过了一些东西。
TABLE 样式曾经做类似的事情，直到我定义：
.navigation table{
height: 70px;
}
之后，它开始表现。我不知道在某处的 DIV 布局中做同样的事情是否会解决这个问题......我已经尝试设置各种元素的高度，但似乎没有任何区别。
很抱歉这个超长的问题。我真的避免自己问问题，但我真的只是碰壁了。