ul li 橫排居中排列的方法

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

ul li橫排的方法

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

ul li{display:inline-block;}

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

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

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

去掉圓點的方法

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

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+CSS+JS實例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程

實例代碼解析

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

python全棧：

笨鳥工具-璞玉天成，大器晚成

. 元素高度聲明的情況下在父容器中居中：絕對居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
優(yōu)點：
1.跨瀏覽器，包括 IE8-10
2.無需其他冗余標(biāo)記，CSS 代碼量少
3.完美支持圖片居中
4.寬度高度可變，可用百分比
缺點：
1.必須聲明高度

2. 負(fù)外邊距：當(dāng)元素寬度高度為固定值時。設(shè)置 margin-top/margin-left 為寬度高度一 半的相反數(shù)，top:50%;left:50%

<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
優(yōu)點：
良好的跨瀏覽器特性，兼容 IE6-7
代碼量少
缺點：
不能自適應(yīng)，不支持百分比尺寸和 min-/max-屬性設(shè)置
內(nèi)容可能溢出容器
邊距大小域與 padding，box-sizing 有關(guān)

3. CSS3 Transform 居中：

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%， -50%);
 -moz-transform: translate(-50%， -50%);
 transform: translate(-50%, -50%);
}
優(yōu)點：
內(nèi)容高度可變
代碼量少
缺點：
IE8 不支持
屬性需要瀏覽器廠商前綴
可能干擾其他 transform 效果

4. table-cell 居中：