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

HTML的li标签默认为竖向显示 。 下面 , 我们来看看html中怎样让多个li标签横排显示吧 。 操作方式 01 HTML页面
利用Visual Studio软件新建出一个HTML页面 , 如下图所示:

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

文章插图

02 li代码
在body标签内输入li标签的相关代码 , 如下所示:
<ul>
<li>模块一</li>
<li>模块二</li>
<li>模块三</li>
<li>模块四</li>
<li>模块五</li>
<li>模块六</li>
<ul>

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

文章插图

03 浏览器中显示
代码在浏览器中显示的成果图可以看到li标签为竖标的目的显示 , 如下图所示:

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

文章插图

04 横排显示
让li标签横排显示的代码如下所示:

#nav ul li
{
float:left;
list-style:none;
}

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

文章插图

05 【html中怎样让多个li标签横排显示】结果图
li标签横标的目的显示的结果图如下图所示:

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

文章插图



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

    推荐阅读