html中怎樣讓多個(gè)li標(biāo)簽橫排顯示？1、新建一個(gè)txt文檔，將文檔修改為“demo.html”的html文件，如下圖所示。2、用Sublime編輯器將html文件打開，完善html5標(biāo)準(zhǔn)化代碼，如下

html中怎樣讓多個(gè)li標(biāo)簽橫排顯示？

1、新建一個(gè)txt文檔，將文檔修改為“demo.html”的html文件，如下圖所示。

2、用Sublime編輯器將html文件打開，完善html5標(biāo)準(zhǔn)化代碼，如下圖所示。

3、在body標(biāo)簽內(nèi)，編寫一套u(yù)l li無序列表標(biāo)簽，代碼如下圖所示。

4、用瀏覽器打開html頁面，可以看到li標(biāo)簽?zāi)J(rèn)情況是豎排顯示（li為塊級(jí)元素），如下圖所示。

5、我們可以通過為ul標(biāo)簽下所有l(wèi)i標(biāo)簽設(shè)定樣式“display: inline-block”的方式，讓多個(gè)li標(biāo)簽橫排顯示。

6、刷新界面后，可以發(fā)現(xiàn)li標(biāo)簽變成橫排顯示。

如何使ul中l(wèi)i元素橫向排列且不換行？

因?yàn)閘i是塊級(jí)元素，默認(rèn)占一行的，要想實(shí)現(xiàn)橫向排列，一般通過以下兩個(gè)方法：

float:left

這樣設(shè)置有一個(gè)問題，li浮動(dòng)以后則脫離了文本流，即不占位置，如果它的父級(jí)元素有具體的樣式且沒有固定寬高，建議父元素清除浮動(dòng)，或者設(shè)置固定寬高

display:inline-block

即把li變?yōu)樾袃?nèi)元素且可以設(shè)置寬高以及邊距，這樣也有一個(gè)問題，低版本的Ie瀏覽器不兼容inline-block，建議在其后再加兩個(gè)屬性兼容低版本ie

*display:inline

*zoom:1

怎么使ul中l(wèi)i元素橫向排列且不換行？

因?yàn)閘i是塊級(jí)元素，默認(rèn)占一行的，要想實(shí)現(xiàn)橫向排列，一般通過以下兩個(gè)方法：float:left這樣設(shè)置有一個(gè)問題，li浮動(dòng)以后則脫離了文本流，即不占位置，如果它的父級(jí)元素有具體的樣式且沒有固定寬高，建議父元素清除浮動(dòng)，或者設(shè)置固定寬高display:inline-block即把li變?yōu)樾袃?nèi)元素且可以設(shè)置寬高以及邊距，這樣也有一個(gè)問題，低版本的Ie瀏覽器不兼容inline-block，建議在其后再加兩個(gè)屬性兼容低版本ie*display:inline*zoom:1