ul li 橫排居中排列的方法

無(wú)序列表的列表項(xiàng)默認(rèn)情況下是豎著排的，因?yàn)閘i元素是塊級(jí)元素，會(huì)自動(dòng)分行。那如果要將列表的列表項(xiàng)進(jìn)行橫排，比用無(wú)序列表ul元素定義一個(gè)導(dǎo)航條。那該怎么辦呢？這當(dāng)中有三個(gè)應(yīng)當(dāng)被解決的東西，一個(gè)是橫排本身，另一個(gè)就是應(yīng)當(dāng)把無(wú)序列表項(xiàng)的圓點(diǎn)去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li橫排的方法

將ul無(wú)序列表元素中的列表項(xiàng)li元素的display屬性設(shè)置成inline或inline-block，個(gè)人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個(gè)div元素，并將div元素的text-align屬性設(shè)置為center即可將ul水平居中。除此之外，因?yàn)閡l的列表默認(rèn)情況下是有左內(nèi)邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內(nèi)邊距padding-left設(shè)置為0，具體可見(jiàn)下方的綜合實(shí)例。

垂直居中方法：為包含ul元素的div元素設(shè)置寬度width和高度height（實(shí)際上導(dǎo)航條一般也需要有寬度和高度的設(shè)置），然后將ul的line-height屬性設(shè)置為父元素的高度height即可。

去掉圓點(diǎn)的方法

將ul元素的list-style屬性設(shè)置為none即可。

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列綜合實(shí)例代碼，及在線編輯器

<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>

實(shí)例代碼解析

如上代碼，一定要將ul的左內(nèi)邊距padding-left設(shè)置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運(yùn)行看一看效果。

版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容，請(qǐng)發(fā)送郵件至2705686032@qq.com 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。原文轉(zhuǎn)載：原文出處：