【筆記】浮動屬性float的應用05——使用列表浮動下一個和後一個按鈕（所有步驟組合在一起）
第1步 - 從一段文字和一個列表開始
在本練習中，我們希望向左浮動一個“後退”按鈕，在右側浮動一個“下一步”按鈕。我們可以使用兩個div，但為了簡單起見，我們將使用兩個列表項。
我們將從一段文字和一個簡單列表開始。UL使用ID選擇器（id =“navigation”）設定樣式，並且兩個LI使用類選擇器（class =“left”和class =“right”）設定樣式。這裡可以使用任何名稱。
第2步 - 刪除子彈
要刪除HTML列表專案符號，請將“list-style-type”設定為“none”。
ul#navigation { list-style-type: none; }
第3步 - 刪除填充和邊距
標準HTML列表具有一定量的左縮排。每個瀏覽器的金額各不相同。有些瀏覽器使用填充（Mozilla，Netscape，Safari），其他瀏覽器使用邊距（Internet Explorer，Opera）來設定縮排量。
要在所有瀏覽器中一致地刪除此左縮排，請將“UL”的填充和邊距都設定為“0”。
margin: 0;
padding: 0;
第4步 - 浮動列表項
現在添加了兩個規則以使列表項移動到頁面的邊緣。在“後退”按鈕上使用“float：left”，在“下一步”按鈕上使用“float：right”。浮動元素時也需要寬度 - 除非它是影象。
對於此示例，使用寬度為5em。float：right list專案看起來好像沒有浮動到包含框的右邊緣。這是因為它在5em寬的盒子內對齊。我們很快就會解決這個問題
ul#navigation .left
{
float: left;
width: 5em;
}
ul#navigation .right
{
float: right;
width: 5em;
}
第5步 - 在列表上方新增一行
要在浮動列表上方新增一行，請使用簡寫規則“border-top：1px solid＃666;”。Netscape 4不喜歡這個規則，所以它應該使用“ @import ” 隱藏在瀏覽器中。
border-top: 1px solid #666;
第6步 - 線上下新增填充
該行非常靠近兩個列表項的頂部。這可以通過調整UL填充來修復。在這種情況下，我們將使用規則“padding：.5em 0;”將.5em新增到UL的頂部和底部，而不是側面。
padding: .5em 0;
第7步 - 顯示塊
為了給列表項提供翻轉效果，需要使用應用於“a”狀態的“display：block”將其轉換為塊。
當超連結轉換為塊級別時，Mac / Opera6會將下劃線放在超連結的單詞上方而不是在它們下面，Win / Opera將根本不顯示下劃線。這些渲染問題將在以下步驟中處理。
ul#navigation li a { display: block; }
第8步 - 移動寬度
除非將寬度新增到“a”狀態，否則Win / IE5和Win / IE6將不會將整個塊識別為活動連結。因此，我們從兩個浮動規則中刪除寬度並將其應用於“a”狀態。
width: 5em;
第9步 - 新增背景顏色
要新增背景顏色，請將其設定為“a”狀態。還添加了顏色以使文字可讀。
color: #FFF;
background-color: #036;
第10步 - 新增填充
將填充新增到“a”狀態中的列表項。
padding: .2em 0;
第11步 - 文字修飾和對齊
此時，您可能希望刪除文字下劃線。通常的做法是導航不要有下劃線，因為它們的位置和其他反饋機制使它們更明顯地成為連結。但是，您應該知道修改標準超連結行為（例如下劃線）可能會讓某些使用者感到困惑，他們可能沒有意識到該項是連結。
我們還將使用“text-align：center”將文字置於框中。
text-align: center;
text-decoration: none;
第12步 - 新增懸停狀態
使用“a：hover”將第二種背景顏色設定為翻轉狀態。如果您現在滾動列表，您將看到翻轉工作。
ul#navigation li a:hover
{
color: #FFF;
background-color: #69C;
}
完了！
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;
text-align:center;
text-decoration:none;
}
ul li a:hover {/*new codes*/
color:#fff;
background-color:#69c;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>效果圖如下：
