CSS-DIV导航菜单替换旧表菜单，元素大小问题

最近几周我花了一些时间来更新我的HTML/CSS知识。因此，我一直在学习如何实现以前使用表而不是div所做的布局

大部分情况下都很好，但我在尝试复制一种使用以下代码作为表的导航菜单时遇到了一些障碍：

HTML:

您可以在此处实时查看此页面： 需要明确的是，这是我想要的菜单行为——悬停元素的大小和字母间距增加，并左右推动其他元素，但保持在同一垂直平面上。这是我一直坚持的垂直平面部分

下面是我用来尝试使用DIVs创建相同菜单的代码：

HTML:

您可以在此处实时查看此页面：

我整个周末都在试图解决这个问题-我到处寻找解决方案，并应用了不同的方法创建水平菜单布局，甚至最终找到了一位对CSS非常精通的朋友-但是，不管我怎么做，我不知道如何实现与表1相同的基于DIV的布局

这几乎就像基于表格的布局从TD元素的中心向元素应用更改，而基于DIV的布局从上角应用更改一样。因此，基于DIV的布局似乎只向下增长，而不是扩展，因此，它两侧的元素不会像表格布局那样在同一水平面上向左和向右流动，而是向左或向右推，也向下推

老实说，我知道解决方案很可能是要么接受它在DIV样式中的不同工作方式，要么继续使用TABLE样式。。。但我相信这应该是可能的，我只是错过了一些东西

在我定义以下内容之前，表样式用于执行类似操作：

.navigation table{
    height: 70px;
}

之后，它开始运行。我不知道在DIV布局中这样做是否能解决这个问题。。。我试过设置各种元素的高度，但似乎没有什么不同

---

很抱歉问了这么长的问题。我真的避免了自己问问题，但我真的遇到了麻烦。

您没有设置锚定的高度，因此高度是从字体大小继承的

如果将高度和线高度添加到锚点，它几乎可以工作；试着玩一下：

.menu a {
    height: 50px;
    line-height: 50px;
}

---

在我看来，这个菜单是一个可用性灾难……好吧，谢谢你的意见。我的印象是这个网站不鼓励“意见”？说清楚一点——我正在学习CSS，我希望能够尽我所能操纵元素。菜单可能会在我重新开始设计之前更改，即使不更改，我也根本不关心可用性——我只是在玩：）好吧，我的答案如下——我在这篇评论中的观点。我就是这么理解的。很公平。。。遗憾的是，你的回答对我的布局没有任何影响-但还是要感谢你。有趣的是，根据Firebug的说法，将这些值添加到锚点实际上根本不会被FF处理…？呵呵，这可能是缓存问题。。。好的，所以控制那里的高度，就像你说的，是一种工作。。。但它还是有点笨重，不像桌子那样排成一行。本杰明：不，就像aid开始玩弄这些价值一样，我是否应该在这个设计中使用桌面布局。尝试了解它们的含义，以及它们与其他属性组合时的工作方式。恐怕垂直对齐不能以这种方式工作。谢谢你，这个。这个很好用，谢谢。在我的原始代码中，我刚刚使用feeela关于调查锚点的线高度的建议使它“有点工作”，但是（出于某些疯狂的原因）它工作正常的唯一方法是将其设置为0:.menu a{lineheight:0px；}但是，使用您的方法，它可以在没有这种软糖的情况下工作，而且更干净。非常感谢你，我将以此作为答案，花一些时间查找我以前没有见过的部分——主要是“显示：表格单元格”和“显示：表格”，因为它们显然很有用。

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

.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);
}

.navigation table{
    height: 70px;
}

.menu a {
    height: 50px;
    line-height: 50px;
}

.menu ul {
    display: table;
    text-align: center;
    height: 70px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: auto;
}

.menu li {
    display: table-cell;
    list-style-image: none;
    list-style-type: none;
    text-align: center;
    vertical-align: middle;
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
}

.menu a {
  vertical-align: middle;
}