整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
實現如下內容的樣式，即文字是豎向排列，并且如下圖的35這個數字，要將其變成橫向排列。
想要方案豎向排列，需要用到css3的writing-mode:vertical-rl;//即豎直廣告，從右到左的方式
.qqbox-text{writing-mode: vertical-rl; /* 文字從上到下，從右到左 */}但這樣寫一個奇怪的問題，就當中我們有一個35，我們要單獨把這個數字區域拿出來，如下圖，我們如果不把35這個數字單獨設置，將出現如下的排版，則非常影響閱讀體驗。
所以，我們要把這個35數字，單獨放在一個盒子里面，并且修改它的writing-mode屬性，讓其恢復正常即可。
這樣就可以實現，文字豎排，并且數字橫向，不影響閱讀。
writing-mode屬性,這在我們寫古詩句的時候，非常有用。
horizontal-tb://默認模式，從左到右，從上到下
vertical-rl://從上到下，從右到左
vertical-lr://從上到下，從左到右
一個網站都有自己的導航菜單，如：頭部導航菜單，底部導航菜單，側邊欄導航菜單，wordpress網站也不例外。那么，在wordpress網站主題模板開發中，我們怎樣給wordpress網站添加前臺的導航菜單呢？嗯，據我多年的開發經驗發現，wordpress為wordpress主題開發，主要提供了三種導航菜單的創建方式，這三種方式會創建不一樣的導航功能。今天，我們就來看看第一種wordpress網站創建導航菜單的方式——基于page頁面的導航菜單。這里，我們會用到wordpress提供的函數——wp_list_pages()，這是一個wordpress頁面列表的函數。
我們先來看一下這個wordpress函數——wp_list_pages()，看看它的結構。
wp_list_pages($defaults);
從上面的代碼中，我們可以看到，wp_list_pages()函數只有一個參數，這個參數有兩種類型，可以是字符串類型，也可以是數組類型。這個我們在下面的實例中會做相應的介紹。為了方便了解這個參數的值，我們這里以數組的形式來解說一下這個參數。
參數介紹：
$defaults =array('depth' =>0, //0：顯示所有頁面和子頁面，按層級顯示；//1：只顯示頂級頁面；//2：顯示2級頁面；//-1：顯示所有頁面和子頁面，不按層級顯示；
'show_date'=>'', //是否顯示創建日期
'date_format'=> get_option('date_format'),//日期格式
'child_of'=>0, //指定父頁面ID號，顯示這個父頁面下的子頁面；0表示顯示所有子頁面；
'exclude'=>'', //排除哪些頁面
'include'=>'', //包含哪些頁面
'title_li'=>'Pages', //是否顯示頁面列表的標題，如果不顯示，設為空；這里設置標題為“Pages”
'echo'=>1, //是否打印到前臺頁面顯示出來。1表示顯示，0表示不顯示，而是只獲取值。
'authors'=>'', //指定特定作者創建的頁面
'link_before'=> '', //鏈接<a>前的內容'link_after'=>'', //鏈接<a>后的內容
'exclude_tree'=>'', //排除父級/子級樹
'sort_column'=>'menu_order', //排序方式，menu_order按后臺設置；post_date按發布時間，post_modified按修改時間；
'sort_order' => 'DESC', //排序順序,ASC順序，DESC是倒序);
可以看到，這個wp_list_pages()函數的參數值有很多，在我們wordpress主題模板開發的實際操作中，一般只會使用其中的幾個。
下面，我們通過案例來介紹wp_list_pages()函數是如何生成基于page頁面的導航菜單的。我們先來看一下，wordpress網站后臺都創建了哪些page單頁面，如下圖：
從上圖中，我們可以看到，這個wordpress網站后臺有6個頁面，其中，“投稿”是“子頁面1”和“子頁面2”的父級頁面。
案例1：我們在wordpress網站模板的頭部添加如下代碼：
$menu = array( 'depth' =>0, 'title_li'=>'頁面導航菜單', 'echo'=>1, );wp_list_pages($menu);
我們再到wordpress網站的前臺頁面看一下效果，如下圖：
我們可以看到，頁面導航展示了出來，子頁面按層級展示——縮進2格。
案例2：我們來修改一個參數代碼，標題設置為空，添加一個排序參數，并修改一下層級參數值，代碼如下：
$menu = array( 'depth' =>1, 'title_li'=>'頁面導航菜單', 'echo'=>1, 'sort_order' => 'DESC','sort_column'=>'menu_order',);wp_list_pages($menu);
這時，我們再來看看wordpress網站前臺頁面的效果，如下圖：
?我們可以看到，導航菜單的標題不見了，而且層級沒有了，排序也發生了變化，按頁面名稱的倒序來進行排列。wp_list_pages()的參數很多，這里不做一一演示，都很簡單。
案例3：wp_list_pages()函數的參數用字符串類型。
我人在開頭說過，wp_list_pages()函數的參數有2種類型，可以是字符串類型，也可以是數組類型。數組類型我們在前2個案例中已經使用過了。這里，我們再來以字符串類型來做一次介紹。
這里我們拿案例的代碼來演示，把數組類型的參數換成字符串的類型，代碼如下：
wp_list_pages("depth=1&title=&echo=1&sort_order=DESC&sort_column=menu_order");
上面的代碼中，我們用到了一個連接符&這個特殊符號，它是用來連接多個參數。中間的=這個符號，就不用解釋了，是等于號。通過這句代碼，我們同樣達到案例2的效果。
如果想讓這個基于page頁面的導航菜單能在頂部橫排顯示，可以修改wordpress網站模板的CSS文件的代碼，修改它的樣式，就可以了。這里就不多說了。
這節課就介紹到這里，以上就是我的觀點，如有不同觀點，歡迎發表評論。同時，歡迎【點贊、分享、收藏】和【關注】我。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
