CSS - DIV導航菜單替換舊的TABLE菜單，元素大小問題

Question

我已經花了一些時間在最後幾個星期更新我的HTML/CSS知識。因此，我一直在學習如何實現我以前用表格完成的佈局，而用DIV來代替。

爲它的被罰款的大部分，但我已經在試圖複製導航菜單的風格，使用下面的代碼作爲表的幾個碰壁運行：

HTML：

<div class="navigation"> 
    <table> 
     <tr> 
      <td><a href="index.php">home</a></td> 
      <td>&nbsp;</td> 
      <td><a href="about.php">about</a></td> 
      <td>&nbsp;</td> 
      <td><a href="music.php">music</a></td> 
      <td>&nbsp;</td> 
      <td><a href="geeking.php">geeking</a></td> 
      <td>&nbsp;</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 要清楚 - 這是我想爲我的男人的行爲u - 用於增加大小和字母間距的懸停元素，並將其他元素向左和向右推，但保持在同一垂直平面上。這是我堅持的垂直平原部分。

下面是我使用的嘗試和創建的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

我一直想弄清楚所有周末 - 我已搜索d對於一個解決方案來說是很高和很低的，並且應用了不同的方法來創建水平菜單佈局，甚至最終找到了一個與CSS相當好的朋友 - 但是，無論我嘗試什麼，我都無法弄清楚如何實現DIV基於佈局的行爲與表1相同。

這幾乎就好像基於表格的佈局將修改應用到TD元素的中心元素，而基於DIV的佈局從頂點應用它。結果，基於DIV的佈局似乎只向下擴展，而不是擴展，結果，其任一側的元素不會在同一水平面上流向左側和右側，就像TABLE佈局，而是向左或向右推，並向下推。

我會誠實 - 我知道解決方案很可能只是接受它在DIV風格中的工作方式，或者繼續使用TABLE風格......但我相信它應該是可能的，而我只是錯過了一些東西。

表式用來做同樣的事情，直到我定義：

.navigation table{ 
    height: 70px; 
} 

之後，它開始表現。我無法弄清楚在DIV中做相同的佈局會在什麼地方解決這個問題......我試着設置各種元素的高度，但沒有任何東西似乎有所作爲。

對不起，這個超長的問題。我真的沒有必要自問一個問題，但我真的碰到了一堵磚牆。

Answer 1

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

http://jsfiddle.net/Nfs46/

Answer 2

您尚未設置錨點的高度，因此高度是從字體大小繼承的。

如果您將高度和線高添加到錨點，它幾乎可以工作;嘗試用打轉轉：

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

Answer 3

.menu a { 
    vertical-align: middle; 
}