整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML ul li 橫排居中排列的方法，三步驟及實例
無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。
垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。
將ul元素的list-style屬性設置為none即可。
HTML ul li 橫排居中排列的方法，三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程
如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
篇文章，小海老師帶領大家一同做一個利用CSS技術實現的導航欄。通過這個導航欄的制作，希望大家能夠對前幾篇文章中學習到的CSS屬性能有一個整體的認識，并能夠達到靈活運用的程度。
承接文章：靈活控制塊級元素在一行內顯示，CSS浮動屬性，知道原理就很簡單
技術等級：初級 | 適合前端開發的初學者閱讀學習。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
如果你是初學前端開發，強烈建議跟著文章中講的步驟自己做一做。步驟不多，思路簡單，占用不了大家太多的時間，自己做一遍，一定會收獲不少。
一、導航欄效果圖展示：
今天我們要做的導航欄效果如下圖所示。
導航欄效果圖展示
這個效果主要使用的是<ul></ul>標記對和<a></a>標記對共同實現的。
整個實例涉及到的CSS屬性如下所示：
width
height
background-color
list-style-type
display
float
margin
line-height
二、實現頁面效果：
首先為導航欄設置一個<div>容器，并設置其id屬性的取值設置為nav。該容器用來控制導航欄的通欄位置。通欄的容器寬度應該設置為100%，這里高度設置為40px，顏色為#a72f2e。實現代碼如下所示：
<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}
由于要在通欄的容器中顯示固定寬度為1000px的導航欄主體，因此在該容器內部再制作一個<div>容器，用來盛放真正的導航欄代碼。我們將它的class屬性取值為navContent。這個容器的寬度設置為1000px，高度與#nav的高度等高，并且在#nav容器內部水平居中。實現代碼如下所示：
<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}
接下來在.navContent容器內部書寫導航欄的各個條目。導航欄是使用<ul></ul>標記對實現的，而它的導航欄條目是利用<li></li>標記對書寫的。因為導航欄需要單擊后跳轉頁面，所以在<li></li>內部使用了<a></a>標記對。
這里要說明一點，因為<li></li>標記對是塊級元素，<a></a>標記對是內聯元素，因此要讓<li></li>標記對包裹<a></a>標記對，不要用<a></a>標記對包裹<li></li>標記對。
這里以導航欄條目“首頁”和“網站介紹”為例，下列HTML代碼展示了導航欄的條目內容。
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="#">網站簡介</a></li>
…
</ul>
需要更多的導航欄條目，可以在<ul>標記對內部重復書寫<li></li>和<a></a>的代碼格式。
三、編寫整個導航欄的CSS樣式：
整個導航欄是使用<ul></ul>標記對實現的，所以需要對<ul></ul>標記對編寫CSS樣式。
由于無序列表的列表項左側帶有小圓點的項目符號，因此需要將該項目符號去掉。所以<ul></ul>標記對的CSS代碼如下所示：
#nav .navContent ul{
list-style-type:none;
}
四、編寫導航欄條目的CSS樣式：
導航欄條目是使用<li></li>標記對實現的，所以需要對<li></li>標記對編寫CSS樣式。
由于<li></li>標記對是塊級元素，因此即使去掉了左側的項目符號，所有的條目依然都各自獨占一行顯示，所以需要讓它們在一行內顯示，這就需要讓所有的<li></li>標記對左浮動。CSS代碼如下所示：
#nav .navContent ul li{
float:left;
}
五、編寫導航欄條目中鏈接的CSS樣式：
導航欄條目中的鏈接是使用<a></a>標記對實現的，所以需要對<a></a>標記對編寫CSS樣式。
由于<a></a>標記對是內聯元素，因此無法設置寬度和高度，也就無法為每一個導航欄條目設置尺寸。因此需要將<a></a>標記對轉換為塊級元素（display屬性），然后設置寬度和高度（width屬性和height屬性）。
有了寬度和高度，就需要讓鏈接的文本在容器中水平居中（text-align屬性）和垂直居中（line-height屬性）了。
最后去掉鏈接的下劃線（text-decoration屬性），并設置鏈接的文本顏色（color屬性）。
導航欄條目中鏈接的CSS代碼如下所示：
#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}
六、編寫鼠標經過導航欄條目時的CSS樣式：
鼠標經過導航欄目時，即使沒有觸碰到鏈接的文本部分，也應該能夠進行跳轉。因此需要對<a></a>標記對編寫鼠標經過時的CSS樣式。
鼠標經過時，希望背景顏色（background-color屬性）和文本顏色（color屬性）發生變化。
鼠標經過鏈接時的CSS代碼如下所示：
#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}
七、整體代碼：
至此，這個簡單的導航欄效果就完全實現了，CSS整體使用了約30行代碼。實現這個導航欄效果的HTML代碼如下圖所示。
HTML整體代碼
實現這個導航欄效果的CSS代碼如下圖所示。
CSS整體代碼
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
下一次，小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎，在實際的布局過程中有許多應用技巧。下一篇文章我會為大家將盒屬性一個一個進行詳細的分析。
天的內容比較簡單，我們來學習一種常見的垂直導航條的實現方法，首先看一下效果圖：
1.首先我們創建一個有效的列表
<li> <a href="http://www.？？？.com">首頁</a> </li>
<li><a href="http://www.？？？.com">關于我們</a> </li>
<li><a href="http://www.？？？.com">產品展示</a> </li>
<li><a href="http://www.？？？.com">產品知識</a> </li>
<li><a href="http://www.？？？.com">新聞動態</a> </li>
<li><a href="http://www.？？？.com" class="last">聯系我們</a></li>
去掉默認的項目符號并將外邊距和內邊距設置為零：
ul.nav{margin:0;
padding:0
list-style-type:none;}
2.接下來我們給導航設置一個淺色的背景和深色的邊框，并給它一定的寬度（根據自己的需要）：
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
3.為鏈接顯示文本設置樣式，首先設置文本的顏色并關閉下劃線，使文本居中對齊，接著為了使每個鏈接看起來像一個獨立的區塊需要設置一下邊框，讓邊框頂部的顏色比背景顏色淺一點邊框底部顏色比背景顏色深深一點，除此之外還需要把它的display屬性設置為block,目的是讓其成為塊級元素，這樣寬度會與列表背景寬度保持一致（下圖展示了它們之間區別）
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
4.現在看起來已經有點像一個垂直導航條了，但最后一個鏈接的底邊框與列表的第邊框貌似重合了，這里我們可以把最后一個鏈接的底邊框設置成與它的頂邊框一致的顏色就可以了。最后我們來完成鼠標懸停時的效果，這是就要用到：hover了，為此只需要修改一下背景和文本顏色就可以了。
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
ul.nav a.last{border-bottom: 1px solid #E4FFD3}
ul.nav a:hover{color:#E4FFD3;
background-color:mediumvioletred;}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
