HTML ul li 橫排居中排列的方法，三步驟及執行個體
ul li 橫排居中排列的方法
無序清單的清單項預設情況下是豎着排的，因為li元素是塊級元素，會自動分行。那如果要将清單的清單項進行橫排，比用無序清單ul元素定義一個導覽列。那該怎麼辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序清單項的圓點去掉，第三則是讓ul定義的清單居中顯示，包括水準居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及執行個體
ul li橫排的方法
将ul無序清單元素中的清單項li元素的display屬性設定成inline或inline-block，個人比較常用的是後者：
ul li{display:inline-block;}
ul水準居中和垂直居中的方法
水準居中方法：隻要将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 橫排居中排列的方法，三步驟及執行個體
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的左内邊距padding-left設定為0，否則ul清單的“水準居中”将偏向右邊，大家可以将.e2中的padding-left删除掉，然後再線上運作看一看效果。
python全棧：
笨鳥工具-璞玉天成，大器晚成