CSS中實(shí)現(xiàn)ul的li元素橫向排列

這篇文章將為大家詳細(xì)講解有關(guān)CSS中實(shí)現(xiàn)ul的li元素橫向排列，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、電商網(wǎng)站制作開發(fā)、小程序設(shè)計(jì)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

ul列表的橫向排列在導(dǎo)航中用得比較多，接下來就通過橫向?qū)Ш綄?shí)例來講講如何用CSS讓ul橫向排列。

注意：

1、li列表前面默認(rèn)有小圓點(diǎn)，有時(shí)候?yàn)榱嗣烙^需要去掉多余的小圓點(diǎn)，可以使用CSS中的list-style:none這個(gè)屬性，當(dāng)然也可以在列表前面加一些圖片。

2、為了讓頁面更具有吸引力，導(dǎo)航一般都會用到偽類元素，最常見的就是hover，它可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過導(dǎo)航時(shí)，改變導(dǎo)航的背景顏色，字體大小，圖片等等。

3、巧妙使用CSS中的display屬性。如果需要讓li具有高度和寬度，并且需要調(diào)節(jié)菜單內(nèi)容的位置，必須將display屬性值設(shè)置為block，將其變成塊級元素后，padding,text-align等屬性才起作用。

一、display:inline 實(shí)現(xiàn)ul橫向排列

用ul li做一個(gè)橫向?qū)Ш?，?shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)，背景顏色改變。代碼如下：

HTML部分：

<ul id="nav">
		<li><a href="#">首頁</a></li>
		<li><a href="#">課程介紹</a></li>
		<li><a href="#">師資力量</a></li>
		<li><a href="#">新聞動(dòng)態(tài)</a></li>
		<li><a href="#">聯(lián)系我們</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>

效果圖：

鼠標(biāo)經(jīng)過的效果：

二、float：left 實(shí)現(xiàn)ul橫向排列

用float：left 實(shí)現(xiàn)ul橫向排列，li浮動(dòng)以后會脫離標(biāo)準(zhǔn)流，且不占位置，如果它的父級元素有具體的樣式且沒有固定寬高，還需要對父元素清除浮動(dòng)，或者設(shè)置固定寬高。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>

效果和上面一樣，只是方法不一樣。

關(guān)于CSS中實(shí)現(xiàn)ul的li元素橫向排列就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱：CSS中實(shí)現(xiàn)ul的li元素橫向排列
文章分享：http://muchs.cn/article44/ipjdee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、ChatGPT、微信小程序、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)