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

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

操作方法

（01）HTML頁面使用Visual Studio軟件新建出一個HTML頁面，如下圖所示：

（02）li代碼在body標籤內輸入li標籤的相關代碼，如下所示： <ul> <li>模塊一</li> <li>模塊二</li> <li>模塊三</li> <li>模塊四</li> <li>模塊五</li> <li>模塊六</li> <ul>

（03）瀏覽器中顯示代碼在瀏覽器中顯示的結果圖可以看到li標籤為豎向顯示，如下圖所示：

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

（05）效果圖li標籤橫向顯示的效果圖如下圖所示：