武林網(www.survivalescaperooms.com)文章簡介：CSS實例教程:制作網站橫向導航.

在上面一節我們講到的是垂直的導航.但是大多網站用的還是橫向的導航,那么就來跟我學下橫向導航是如何實現的.

要怎么實現下面的效果.只要在列表項之間避免換行就行了,所以要把<li>轉換為內聯.

HTML和CSS代碼如下:

=============================

body { 
 padding: 1em; 
} 
#navigation { 
 font-size: 90%; 
} 
#navigation ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 padding-top: 1em; 
} 
#navigation li { 
 display: inline; 
} 
#navigation a:link, #navigation a:visited { 
 padding: 0.4em 1em 0.4em 1em;  
 color: #FFFFFF; 
 background-color: #B51032; 
 text-decoration: none; 
 border: 1px solid #711515; 
} 
#navigation a:hover { 
 color: #FFFFFF; 
 background-color: #711515; 
}

=============================

分析:

創建一個div容器,然后在里面添加一個列表:
================================
<div id="navigation"> 
 <ul> 
   <li><a href="#">Recipes</a></li> 
   <li><a href="#">Contact Us</a></li> 
   <li><a href="#">Articles</a></li> 
   <li><a href="#">Buy Online</a></li> 
 </ul> 
</div>

==============================

在#navigation 容器里添加一些基本的信息,如字體的大小.在CSS布局中這個容器還可能會添加一些額外的信息,如:確定這個導航在頁面上的位置.
===============================
#navigation { 
 font-size: 90%; 
}

=================================

接下來在<ul>對象,我們把默認的圓點清除和清除默認的縮進.

============================
#navigation ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 padding-top: 1em; 
}

============================
現在是橫向導航最重要的一部分,因為沒有了這一步那就不叫橫向了,^_^.設置<li>為內聯元素,這樣就避免了換行.

=========================
#navigation li { 
 display: inline; 
}

==========================
最后再給導航增加些效果:

==========================
#navigation a:link, #navigation a:visited { 
 padding: 0.4em 1em 0.4em 1em;  
 color: #FFFFFF; 
 background-color: #B51032; 
 text-decoration: none; 
 border: 1px solid #711515; 
} 
#navigation a:hover { 
 color: #FFFFFF; 
 background-color: #711515; 
}

=========================
PS:如果你想讓文本與邊框的距離大一點,那么你就要設置left padding和right padding.如果你想讓項與項之間的距離變大,那么你也要設置left margin 和right margin.