當前位置:常識百科館>遊戲數碼>電腦>

html中怎樣讓多個li標籤橫排顯示

電腦 閱讀(1.3W)

HTML的li標籤默認爲豎向顯示。下面,我們來看看html中怎樣讓多個li標籤橫排顯示吧。

html中怎樣讓多個li標籤橫排顯示

操作方法

(01)HTML頁面使用Visual Studio軟件新建出一個HTML頁面,如下圖所示:

html中怎樣讓多個li標籤橫排顯示 第2張

(02)li代碼在body標籤內輸入li標籤的相關代碼,如下所示: <ul> <li>模組一</li> <li>模組二</li> <li>模組三</li> <li>模組四</li> <li>模組五</li> <li>模組六</li> <ul>

html中怎樣讓多個li標籤橫排顯示 第3張

(03)瀏覽器中顯示代碼在瀏覽器中顯示的結果圖可以看到li標籤爲豎向顯示,如下圖所示:

html中怎樣讓多個li標籤橫排顯示 第4張

(04)橫排顯示讓li標籤橫排顯示的代碼如下所示: #nav ul li { float:left; list-style:none; }

html中怎樣讓多個li標籤橫排顯示 第5張

(05)效果圖li標籤橫向顯示的效果圖如下圖所示:

html中怎樣讓多個li標籤橫排顯示 第6張