在頁面佈局時，我們經常使用li標籤，因為li標籤用途很廣泛，它可以用來製作列表，選項卡，導航等等。但是
ul清單的橫向排列在導航中用得比較多，接下來就透過橫向導航實例來講講如何用CSS讓ul橫向排列。
注意：
1、li列表前面預設有小圓點，有時候為了美觀需要去掉多餘的小圓點，可以使用CSS中的list- style:none這個屬性，當然也可以在列表前面加一些圖片。
2、為了讓頁面更具有吸引力，導航一般都會用到偽類元素，最常見的就是hover，它可以實現滑鼠經過導航時，改變導航的背景顏色，字體大小，圖片等等。
3、巧妙使用CSS中的display屬性。如果需要讓li具有高度和寬度，並且需要調整選單內容的位置，必須將display屬性值設為block，將其變成區塊級元素後，padding,text-align等屬性才會運作。
一、display:inline 實現ul橫向排列
用ul li做一個橫向導航，實現滑鼠經過時，背景顏色改變。程式碼如下：
HTML部分：
<ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">课程介绍</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">联系我们</a></li> </ul>
CSS部分：
<style type="text/css">
#nav {
margin: 50px auto;
height: 40px;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: inline;
}
#nav a {
line-height: 40px;
color: #fff;
text-decoration: none;
padding: 20px 20px;
}
#nav a:hover {
background-color: #060;
}
</style>效果圖：
二、float：left 實作ul橫向排列
以float：left 實作ul橫向排列， li浮動以後會脫離標準流，且不佔位置，如果它的父級元素有具體的樣式且沒有固定寬高，還需要對父元素清除浮動，或者設定固定寬高。 HTML部分和上面一樣，CSS部分如下所示：<style type="text/css">
#nav {
height: 40px;
margin-top: 50px;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: block;
float: left;
}
#nav a {
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
}
#nav a:hover {
background-color: #060;
}
</style>#
以上是圖文詳解如何讓ul中的li元素橫向排列（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
