整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML ul li 橫排居中排列的方法，三步驟及實例
無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應(yīng)當被解決的東西，一個是橫排本身，另一個就是應(yīng)當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設(shè)置成inline或inline-block，個人比較常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設(shè)置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內(nèi)邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內(nèi)邊距padding-left設(shè)置為0，具體可見下方的綜合實例。
垂直居中方法：為包含ul元素的div元素設(shè)置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設(shè)置），然后將ul的line-height屬性設(shè)置為父元素的高度height即可。
將ul元素的list-style屬性設(shè)置為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的左內(nèi)邊距padding-left設(shè)置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個網(wǎng)站內(nèi)都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個橫向?qū)Ш綏l，然后鼠標經(jīng)過橫向?qū)Ш綏l之后，子導航顯示出來。
我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經(jīng)過（hover）的效果。
1、列表標簽ul、dl（我們使用ul、dl來創(chuàng)建同類型的導航元素內(nèi)容，通過設(shè)置css樣式來達到圖片所示效果）；
2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據(jù)元素空間）
4、鼠標經(jīng)過hover（使用css的鼠標經(jīng)過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現(xiàn)子菜單的顯示與隱藏）
具體的實現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個縱向菜單導航原理跟橫向的類似，只需簡單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
果圖：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS3橫向?qū)Ш綑?lt;/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小時內(nèi)與您取得聯(lián)系。
