大多數的導航欄都是橫向排列如下圖所示，那麼這究竟是怎麼實現的呢？其實它主要運用<ul>標籤中li的橫向排列，下面以一個例子向大家詳細講解具體是如何實現的。
1編寫橫向菜單的HTML代碼架構<ul id=menu> <li><a href=http://www.baidu.com>Baidu.Com</a></li> <li><a href=//www.VeVb.com>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>設置公共樣式
<style type=text/css> #menu { font:12px verdana, arial, sans-serif; /* 設置文字大小和字體樣式*/ width: 100%; } #menu, #menu li { list-style:none; /* 將默認的列表符號去掉*/ padding:0; /* 將默認的內邊距去掉*/ margin:0; /* 將默認的外邊距去掉*/ float: left; /* 往左浮動*/ display: block;}<2>設置鏈接樣式
<style type=text/css> #menu li a { display:block; /* 將鏈接設為塊級元素*/ width:150px; /* 設置寬度*/ height:30px; /* 設置高度*/ line-height:30px; /* 設置行高，將行高和高度設置同一個值，可以讓單行文本垂直居中*/ text-align:center; /* 居中對齊文字*/ background:#3A4953; /* 設置背景色*/ color:#fff; /* 設置文字顏色*/ text-decoration:none; /* 去掉下劃線*/ border-right:1px solid #000; /* 在左側加上分隔線*/}</style><3>鏈接懸停效果
<style type=text/css> #menu li a:hover { background:#146C9C; /* 變換背景色*/ color:#fff; /* 變換文字顏色*/ }</style><4>去掉最左邊導航欄的右邊框
<style type=text/css> #menu li a.last { border-right:0; /* 去掉左側邊框*/ }</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; /* 設置文字大小和字體樣式*/ width: 100%; } #menu, #menu li { list-style:none; /* 將默認的列表符號去掉*/ padding:0; /* 將默認的內邊距去掉*/ margin:0; /* 將默認的外邊距去掉*/ float: left; /* 往左浮動*/ display: block; } #menu li a { display:inline-block; /* 將鏈接設為塊級元素*/ width:150px; /* 設置寬度*/ height:30px; /* 設置高度*/ line-height:30px; /* 設置行高，將行高和高度設置同一個值，可以讓單行文本垂直居中*/ text-align:center; /* 居中對齊文字*/ background:#3A4953; /* 設置背景色*/ color:#fff; /* 設置文字顏色*/ text-decoration:none; /* 去掉下劃線*/ border-right:1px solid #000; /* 在左側加上分隔線*/ } #menu li a:hover { background:#146C9C; /* 變換背景色*/ color:#fff; /* 變換文字顏色*/ } #menu li a.last { border-right:0; /* 去掉左側邊框*/ }</style> </head><body> <ul id=menu> <li><a href=http://www.baidu.com>Baidu.Com</a></li> <li><a href=//www.VeVb.com>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>在線運行
提示：您可以先修改部分代碼再運行
總之，使其橫向排列的最需要的是:<ui>標籤的主要樣式為display:balock;
<li>的主要樣式為display:inline-balock,float：left,list-style:none;
到此這篇關於HTMl中標籤中li橫向排列的實現示例的文章就介紹到這了,更多相關HTMl li橫向排列內容請搜素武林網以前的文章或下面相關文章，希望大家以後多多支持武林網！