大多數(shù)的導(dǎo)航欄都是橫向排列如下圖所示，那么這究竟是怎么實(shí)現(xiàn)的呢？其實(shí)它主要運(yùn)用<ul>標(biāo)簽中l(wèi)i的橫向排列，下面以一個(gè)例子向大家詳細(xì)講解具體是如何實(shí)現(xiàn)的。
1編寫橫向菜單的HTML代碼架構(gòu)
<ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="//www.jb51.net">Jb51.net</a></li> <li><a href="http://www.yahoo.com">Yahoo.Com</a></li> <li><a href="http://www.google.com" class="last">Google.Com</a></li> </ul>
2 編寫CSS代碼
<1>設(shè)置公共樣式
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 設(shè)置文字大小和字體樣式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 將默認(rèn)的列表符號(hào)去掉 */
padding:0; /* 將默認(rèn)的內(nèi)邊距去掉 */
margin:0; /* 將默認(rèn)的外邊距去掉 */
float: left; /* 往左浮動(dòng) */
display: block;
}
<2>設(shè)置鏈接樣式
<style type="text/css">
#menu li a {
display:block; /* 將鏈接設(shè)為塊級(jí)元素 */
width:150px; /* 設(shè)置寬度 */
height:30px; /* 設(shè)置高度 */
line-height:30px; /* 設(shè)置行高，將行高和高度設(shè)置同一個(gè)值，可以讓單行文本垂直居中 */
text-align:center; /* 居中對(duì)齊文字 */
background:#3A4953; /* 設(shè)置背景色 */
color:#fff; /* 設(shè)置文字顏色 */
text-decoration:none; /* 去掉下劃線 */
border-right:1px solid #000; /* 在左側(cè)加上分隔線 */
}
</style>
<3>鏈接懸停效果
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 變換背景色 */
color:#fff; /* 變換文字顏色 */
}
</style>
<4>去掉最左邊導(dǎo)航欄的右邊框
<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左側(cè)邊框 */
}
</style>
3 完整的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片提示效果</title>
<script src="../jquery-3.3.1.min.js"></script>
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 設(shè)置文字大小和字體樣式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 將默認(rèn)的列表符號(hào)去掉 */
padding:0; /* 將默認(rèn)的內(nèi)邊距去掉 */
margin:0; /* 將默認(rèn)的外邊距去掉 */
float: left; /* 往左浮動(dòng) */
display: block;
}
#menu li a {
display:inline-block; /* 將鏈接設(shè)為塊級(jí)元素 */
width:150px; /* 設(shè)置寬度 */
height:30px; /* 設(shè)置高度 */
line-height:30px; /* 設(shè)置行高，將行高和高度設(shè)置同一個(gè)值，可以讓單行文本垂直居中 */
text-align:center; /* 居中對(duì)齊文字 */
background:#3A4953; /* 設(shè)置背景色 */
color:#fff; /* 設(shè)置文字顏色 */
text-decoration:none; /* 去掉下劃線 */
border-right:1px solid #000; /* 在左側(cè)加上分隔線 */
}
#menu li a:hover {
background:#146C9C; /* 變換背景色 */
color:#fff; /* 變換文字顏色 */
}
#menu li a.last {
border-right:0; /* 去掉左側(cè)邊框 */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="//www.jb51.net">Jb51.net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
<li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
</body>
</html>
在線運(yùn)行
總之，使其橫向排列的最需要的是: <ui>標(biāo)簽的主要樣式為display:balock;
<li>的主要樣式為display:inline-balock,float：left,list-style:none;
到此這篇關(guān)于HTMl中標(biāo)簽中l(wèi)i橫向排列的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)HTMl li橫向排列內(nèi)容請(qǐng)搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：清遠(yuǎn) 保定 陜西 內(nèi)蒙古 吳忠 廣安 上海 山南
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTMl中標(biāo)簽中l(wèi)i橫向排列的實(shí)現(xiàn)示例》，本文關(guān)鍵詞 HTMl,中,標(biāo)簽,橫向,排列,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
