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标签横向显示的效果图如下图所示：

赞 (0)

相关推荐

  • html中如何将li标签的点去掉

    html中如何将li标签的点去掉 操作方法 01 找到文件打开. 02 首先我们找到带有ul和li的标识处. 03 打开我们发现在网页中前有点. 04 接下里我们回到处理程序,找到css,或者styl ...

  • html中去除ul,li标签的样式列表标签的点？

    本人在最近在学习网页编程知识,在学习中遇到了一个小问题,发现在使用ul li标签的时候,发现会有默认的样式在哪里.怎么去除默认的样式呢? 操作方法 01 首先来看看我们使用列表标签出现的问题. < ...

  • 怎样删除dedecms友情链接中的<li>标签

    关于织梦dedecms友情链接中的<li>标签的删除问题,dedecms使用者经常会用到.以下是这样去除dedecms友情链接中的li方法. 方法一: 01 首先,在织梦系统的文件目录中, ...

  • 怎样去除li标签前面的圆点

    li标签作为html的列表标签,当其在ul中时,是无序列表,每个li标签之前均有一个粗体的圆点,那么我们应该怎样去除这种圆点呢?下面小编就来告诉大家. 操作方法 01 首先我们要打开电脑,找到已经安装 ...

  • 去掉小圆点；li标签去掉圆点

    html中的<li>标签自动会带个小圆点,要如何去掉这个小圆点呢?其实简单,只需要对<li>标签设置样式 list-style: none; 就可以去掉小圆点了. 语法: li ...

  • 如何给苹果iPhone11手机中的蜂窝号码设置自定义标签

    如何给苹果iPhone11手机中的蜂窝号码设置自定义标签

    今天给大家介绍一下如何给苹果iPhone11手机中的蜂窝号码设置自定义标签的具体操作步骤.1. 打开手机,找到桌面上的设置图标,打开.2. 进入设置页面后,找到蜂窝网络的选项,打开.3. 如图,在下方 ...

  • 怎样让html中的img标签居中显示

    在html页面开发中,我们很多时候会用到img标签.那么你知道怎样让img标签居中显示吗?下面来看下. 操作方法 01 先看下我们的html代码,在一个div里放入一个img图片标签. 02 再看下我 ...

  • 360浏览器怎么设置在标签上显示网站图标?

    360浏览器打开的网页,标签没有显示网站图标,不方便快速查找网页,该怎么办呢?下面我们就来看看让浏览器标签显示网站图标的教程. 1.打开360浏览器主页,如图所示. 2.点击上方的工具,如图所示. 3 ...

  • Excel表格中快速实现元转换成以万元显示的方法

      Excel表格中快速实现元转换成以万元显示的方法 左表为源表,右表为显示表.右表旁有一个框(万元). 点击框,框内会画一个勾.右表马上会转换成以万元显示. 这样的转换方便吧.下面本文带大家一起动手 ...