當(dāng)你在研究用CSS來創(chuàng)造水平列表時，會發(fā)現(xiàn)至少有兩種方法將列表項安排在同一行里。兩種方法各有千秋，但都需要CSS來解決布局所帶來的混亂。一種方法使用inline box，另一種則用floats。

方法一，可能是比較普遍的一種，是將列表項都inline顯示。inline方法的魅力在于它的簡易性。但是，對于我們即將談到的滑動門技術(shù)來說，inline方法在特定的瀏覽器上存在一些解釋上問題。方法二，是我們將要關(guān)注的，即用floats將列表項安排在同一行里。令人沮喪的是，floats表面上矛盾的行為正巧回避了自然的邏輯。盡管如此，對于解決多重浮動元素的基本認(rèn)識，以及可靠浮動的意義，仍是值得討論的。

我們將用另一種浮動元素來解決浮動元素的排列問題。這樣，父類元素將子類元素完全包括起來。于是，我們就可以為標(biāo)簽加上背景色彩和背景圖像。非常重要的一點必須記住，緊跟在標(biāo)簽后的文本元素用CSS中的clear功能來清除浮動對象。這樣避免了浮動標(biāo)簽影響頁面上其它元素的位置。

我們從以下的標(biāo)記開始：

現(xiàn)實中，#header div可能同樣包含logo和搜索框。對于我們的例子，我們要縮短每一個錨鏈中超鏈接的值。顯然，這些值應(yīng)該正確的包含文件或者目錄的位置。

我們從定位#header容器開始設(shè)計列表。這樣確保了這個容器確確實實的充當(dāng)了容器的作用，以包容它內(nèi)部浮動的列表項。既然元素是浮動的，我們同樣需要聲明它的寬度為100%。加入臨時的黃色背景以確保父類容器完全填滿標(biāo)簽后面的整個區(qū)域。同樣，設(shè)定默認(rèn)的文本屬性，確保樣式的統(tǒng)一：

#header { float:left; width:100%; background:yellow; font-size:93%; line-height:normal; }

現(xiàn)在，我們同樣需要為無序列表設(shè)定默認(rèn)的margin/padding值為0，并去掉列表項前面的標(biāo)記。每個列表項左浮動：

#header ul { margin:0; padding:0; list-style:none; }#header li { float:left; margin:0; padding:0; }

設(shè)定錨鏈強制作為塊對象呈遞，我們便可無憂的控制所有的樣式：

#header a { display:block; }

下一步，我們將右側(cè)的背景圖像加入到列表項中去（改變?nèi)?STRONG>粗體所示）：

#header li { float:left; background:url("norm_right.gif") no-repeat right top; margin:0; padding:0; }

在加入左側(cè)圖像之前，我們可以在效果1種看看目前為止的效果。（在效果中，忽略body中的規(guī)則。僅設(shè)定基本margin,padding,colors,text的屬性。）

---

現(xiàn)在我們可以將左側(cè)圖像放置在錨鏈的左邊（容器內(nèi)的元素）。我們同時加入padding，擴大標(biāo)簽并將文本從標(biāo)簽的邊緣推開：

#header a { display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; }

這樣我們就得到了效果2。注意我們的標(biāo)簽是如何成型的。在這里，IE5/Mac的用戶會立刻驚奇道，“天啊，我的標(biāo)簽垂直堆在一起并且延伸至整個屏幕！”不要著急，我們馬上幫你解決。眼下，盡量按照下面去做，或者方便的話，臨時改換其他的瀏覽器，并且IE5/Mac版本的問題會馬上得到解決。

---

現(xiàn)在，一般標(biāo)簽的背景圖像已經(jīng)完成了，我們要為“當(dāng)前”標(biāo)簽更換圖像。我們通過對目標(biāo)列表項加入id="current"和錨鏈來實現(xiàn)。既然不需要改變背景的其他外觀，圖像除外，我們就使用background-image的特性：

#header #current { background-image:url("norm_right_on.gif"); }#header #current a { background-image:url("norm_left_on.gif"); }

我們要在標(biāo)簽下添加一條邊框。但是，將邊框?qū)傩詰?yīng)用于父類的#header容器上，將不能解決“當(dāng)前”標(biāo)簽無需邊框的問題。于是我們制作新的帶有邊框的圖像以代替它。同樣，我們可以為它加入漸變效果：

我們將圖像放置到#header容器的背景中去（代替原有的黃色背景），將背景圖像移至到最下方，并為圖像上方留出的空白添加相應(yīng)的背景顏色。同時，去掉由body繼承下來的padding，為ul的上、左、右邊加進(jìn)10像素的padding：

#header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; }#header ul { margin:0; padding:10px 10px 0; list-style:none; }

我們必須讓“當(dāng)前”標(biāo)簽覆蓋邊框，如下面提示的那樣。你也許會認(rèn)為我們將要把底部邊框加入到與其顏色相對應(yīng)的、#header背景圖像中去，然后將“當(dāng)前”標(biāo)簽的底部邊框顏色改為白色。但是，對于挑剔的觀察者，還是會發(fā)現(xiàn)一些細(xì)小的差別。于是，我們改變錨鏈的padding，為“當(dāng)前”標(biāo)簽創(chuàng)造出直角來，如下面放大的例子：

我們通過減少1像素普通錨鏈的底部padding值（5px-1px=4px）來實現(xiàn)，然后為“當(dāng)前”錨鏈補上減去的padding。

#header a { display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; }#header #current a { background-image:url("norm_left_on.gif"); padding-bottom:5px; }

經(jīng)過改變，底部邊框?qū)⒃谄胀?biāo)簽中出現(xiàn)，而在“當(dāng)前”標(biāo)簽中則隱藏了起來。于是，我們得到了效果3。