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

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

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

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

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

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

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

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

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

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

#header a { display:block; }

下一步，我們將右側(cè)的背景圖像加入到列表項(xiàng)中去（改變?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)的元素）。我們同時(shí)加入padding，擴(kuò)大標(biāo)簽并將文本從標(biāo)簽的邊緣推開(kāi)：

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

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

—

現(xiàn)在，一般標(biāo)簽的背景圖像已經(jīng)完成了，我們要為“當(dāng)前”標(biāo)簽更換圖像。我們通過(guò)對(duì)目標(biāo)列表項(xiàng)加入id=”current”和錨鏈來(lái)實(shí)現(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)簽無(wú)需邊框的問(wèn)題。于是我們制作新的帶有邊框的圖像以代替它。同樣，我們可以為它加入漸變效果：

我們將圖像放置到#header容器的背景中去（代替原有的黃色背景），將背景圖像移至到最下方，并為圖像上方留出的空白添加相應(yīng)的背景顏色。同時(shí)，去掉由body繼承下來(lái)的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)簽覆蓋邊框，如下面提示的那樣。你也許會(huì)認(rèn)為我們將要把底部邊框加入到與其顏色相對(duì)應(yīng)的、#header背景圖像中去，然后將“當(dāng)前”標(biāo)簽的底部邊框顏色改為白色。但是，對(duì)于挑剔的觀察者，還是會(huì)發(fā)現(xiàn)一些細(xì)小的差別。于是，我們改變錨鏈的padding，為“當(dāng)前”標(biāo)簽創(chuàng)造出直角來(lái)，如下面放大的例子：

我們通過(guò)減少1像素普通錨鏈的底部padding值（5px-1px=4px）來(lái)實(shí)現(xiàn)，然后為“當(dāng)前”錨鏈補(bǔ)上減去的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)過(guò)改變，底部邊框?qū)⒃谄胀?biāo)簽中出現(xiàn)，而在“當(dāng)前”標(biāo)簽中則隱藏了起來(lái)。于是，我們得到了效果3。