當我們剛開始學習html/css的時候，對於padding 、float、行內元素、塊級元素用起來可能會混淆，但是呢我們可以通過一個簡單的nav案例來清楚各自具體作用。

1.首先我們創建一個大的容器，用來固定我們的nav在屏幕上展示

我們給它設置一個寬度和背景色。

2.我們設置nav的<div>標簽屬性，並讓他依據它的父元素container給它居中顯示。

這裏的nav我們給它一個width和height。

3.我們再設置<ul>的屬性，因為它是nav裏面文字總的一個寬度，我們對它設置屬性來進行文字位置的調整

黑色底部是container容器、 紅色是nav、 白色是每個<li>標簽設置相應的寬和高度 ，給<ul>設定一個padding-left:70px的內邊距（註意：因為這裏的白色區域加起來是600，所以說還有100你是看不見的）並對<li>進行左浮動float:left;

padding一般用於文字內容與父元素的距離。

4.最後我們設置標簽<a>文字屬性

我們首先給<a>文字設置寬和高度 寬度要小於<li>設置的寬度 ，高度一致。然後在這裏可能有疑問，前面<li>設置了寬和高這裏為什麽又要設置。因為我們在這裏設置寬和高是要根據<li>的寬和高來進行居中和行高對齊。

因為<a>標簽又是行內元素，所以我們先要對它進行轉化成塊元素display:block;然後可以設置字體的樣式。最後我們再把黑色背景塊和白色背景塊去掉，這樣一個簡單的nav就完成了。

<ul>標簽設計簡單導航欄