小小的導航欄，有大大的秘密。

作者最近加入FreeCodeCamp-一個GitHub開源專案，也是一所被認可的網路學校。在FreeCodeCamp，作者跟著進度，遇到了難題。

一開始的導航欄便讓我犯難。

當然，作者之前也寫過許多網頁，做過許多導航欄，也都差不多成功了。那麼，今天為什麼還要拿看似簡單的導航欄出來，津津樂道呢？問題就在於，總結。

雖然以前導航欄做了不少，但是每一次都遇到問題，簡單的問題卻花費作者大量的時間去摸索。這次也不例外。

大家可以看到，就是這樣一個五個詞彙的導航欄，作者卻花了大概3個小時。

這次不同的是，在這三個小時裡，我領悟到了一套迅速做好導航欄的方法。作為我簡書上的第一篇文章，分享給大家。

已經完成的導航欄

首先，大的灰色長條背景是一個高50px的div。

左邊的ZHOULIANG是一個子div，裡面放一個p標籤。並沒有給連結。

重點來了，右邊還是大家熟悉的ul裡面四個li，每個li裡面放一個a來存文字。

可是，怎樣才能做到圖示的幾點呢？

1.四個單詞在右邊，並且不緊靠右側。

2.Home,About,Protfolio,Contact之間的間距一樣。

3.四個單詞垂直居中。

還有下圖的效果：根據文字的長度，hover變色。

protfolio

home

about

contact

好了，直接為大家解答（這裡假設父div的id為lead）

做導航欄，css裡面一定要有

1.#lead ul     2.#lead ul li     3.#lead ul li a     4.#lead ul li a:hover

這點毋庸置疑。技巧來了

1.#lead ul{margin: 0;padding: 0;overflow: hidden;width:425px;margin-left:1200px;background:#505050;}    這是這個導航欄，我給ul的樣式。加粗的部分，大家注意了！如果沒有這個部分，會發生什麼呢，不妨讓我們來看一看f12下的ul

f12下的ul

大家注意到了嗎？ul沒有高度！作為包含了四個li的容器，ul莫名其妙的失去了高度。而在我們加上了上面加粗部分的程式碼後，會發生什麼呢？

正確的ul

這才是我們的ul啊，不是嗎？所以技巧一：給你的ul加上margin: 0;padding: 0;overflow: hidden；這樣，ul的寬，高，背景色都不是問題了。第一個問題便也解決：.四個單詞在右邊，並且不緊靠右側     答案：獲得正確的ul後，給它加上margin-left。

2.#lead ul li a{font-size:25px;text-decoration: none;display: block;text-align: center;padding-top: 10px;height: 40px;color: ghostwhite;}     這是這個導航欄，我給a加的樣式。首先display，然後給padding-top自行調整。讓其居中，這也解決了第二個問題。然後既然轉變成了塊狀元素，就可以設定其高度。這裡注意了，雖然父div的高度是50px，但是別忘了我們為了讓其居中，而給了padding-top,所以為了達到上圖所示的hover效果，我們給出的高度等於父div的高度減去padding-top的值。

3.

行間樣式

為了讓hover的變色長度適應文字的長度，我們在行間根據文字長度，自己定義每個a的寬度，這樣便解決了第三個問題。

作者：BlueBeginner
連結：