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 【html中怎样让多个li标签横排显示】结果图
li标签横标的目的显示的结果图如下图所示：

文章插图

以上内容就是html中怎样让多个li标签横排显示的内容啦，希望对你有所帮助哦！

html中怎样让多个li标签横排显示