整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。
我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經過（hover）的效果。
1、列表標簽ul、dl（我們使用ul、dl來創建同類型的導航元素內容，通過設置css樣式來達到圖片所示效果）；
2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據元素空間）
4、鼠標經過hover（使用css的鼠標經過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現子菜單的顯示與隱藏）
具體的實現html代碼以及css代碼就如下圖所示：
還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
果圖：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS3橫向導航欄</title> <link rel="stylesheet" href="index.css" media="screen" type="text/css" /> </head> <body> <article class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">Tab One</label> <input id="two" name="tabs" type="radio" value="Two"> <label for="two">Tab Two</label> <input id="three" name="tabs" type="radio"> <label for="three">Tab Three</label> <input id="four" name="tabs" type="radio"> <label for="four">Tab Four</label> <div class="panels"> <div class="panel"> <h2>This is Panel One</h2> <p>This is Panel One</p> </div> <div class="panel"> <h2>This is Panel Two</h2> <p>this is panel two</p> </div> <div class="panel"> <h2>This is Panel Three</h2> <p>this is panel three</p> </div> <div class="panel"> <h2>This is Panel four</h2> <p>this is panel four</p> </div> </div> </article> </body> </html>
index.css
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
