【筆記】浮動屬性float的應用06——浮動內聯列表項（所有步驟組合在一起）
第1步 - 從簡單的無序列表開始
在本練習中，我們想要一個簡單的無序列表並將其轉換為水平導航欄。
我們將從一個簡單的無序列表開始。UL使用ID選擇器（id =“navigation”）設定樣式，並且兩個LI使用類選擇器（class =“left”和class =“right”）設定樣式。這裡可以使用任何名稱。
第2步 - 刪除子彈
要刪除HTML列表專案符號，請將“list-style-type”設定為“none”。為了定位特定的UL，我們使用“ul＃navlist”，否則頁面上的所有UL都會受到影響。
ul#navlist { list-style-type: none; }
第3步 - 刪除填充和邊距
標準HTML列表具有一定量的左縮排。每個瀏覽器的金額各不相同。有些瀏覽器使用填充（Mozilla，Netscape，Safari），其他瀏覽器使用邊距（Internet Explorer，Opera）來設定縮排量。
要在所有瀏覽器中一致地刪除此左縮排，請將“UL”的填充和邊距都設定為“0”。
padding: 0;
margin: 0;
第4步 - 顯示內聯
要強制列表成一行，請應用“display：inline;” 到“李”。要定位特定列表，我們使用“ul＃navlist li”。這意味著我們希望在UL中定位LI元素，使用名為“navlist”的ID進行樣式設定。
ul#navlist li { display: inline; }
第5步 - 浮動“a”狀態
當列表項轉換為內聯時，它們的左邊緣有一定量的填充，無法刪除。要使列表項彼此相鄰而沒有任何間隙，必須將它們設定為“float：left”。在這個階段，我們無法看到差距已經結束。
浮動元素時也需要寬度 - 除非它是影象。
ul#navlist li a
{
float: left;
width: 5em;
}
第6步 - 新增背景顏色
此時，可以應用背景顏色和文字顏色。有許多顏色組合可以使用。
color: #fff;
background-color: #036;
步驟7 - 將填充新增到“a”狀態
要將每個列表項放入框中，我們需要將填充新增到“a”狀態。在這種情況下，我們使用簡寫規則。頂部和底部的填充設定為0.2em，左側和右側的填充設定為1em。
padding: 0.2em 1em;
第8步 - 刪除文字修飾
此時，您可能希望刪除文字下劃線。通常的做法是導航不要有下劃線，因為它們的位置和其他反饋機制使它們更明顯地成為連結。但是，您應該知道修改標準超連結行為（例如下劃線）可能會讓某些使用者感到困惑，他們可能沒有意識到該項是連結。
text-decoration: none;
步驟9 - 新增邊框以分隔列表項
邊框設定在列表項的右側以將它們分開。
border-right: 1px solid #fff;
第10步 - 新增翻轉顏色
使用“a：hover”設定第二種背景顏色，作為翻轉狀態。如果您現在滾動列表，您將看到翻轉工作。
ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}
步驟11 - 浮動UL
要將整個列表放入導航欄，我們需要為UL著色並將其拉伸到瀏覽器視窗的整個寬度。在我們這樣做之前，我們需要將“float：left”應用於UL - 否則它將不會顯示。因此，將float應用於UL並將寬度設定為“100％”。
浮動元素時也需要寬度 - 除非它是影象。
float: left;
width: 100%;
步驟12 - 向UL新增背景顏色
此時，可以將背景顏色和文字顏色應用於UL。有許多顏色組合可以使用。
color: #fff;
background-color: #036;
完了！
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
float:left;
width:100%;
color:#fff;/*new codes*/
background-color:#036;/*new codes*/
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;
border-right:1px solid #fff;
}
ul#navlist li a:hover {
background-color:#369;
color:#fff;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果圖如下：
