css怎么取消无序列表的显示样式类型

WBOY
Freigeben: 2022-04-27 17:49:15
Original
3653 Leute haben es durchsucht

取消方法:1、利用“list-style”属性取消无序列表的小黑点样式,语法为“无序列表{list-style:none}”;2、利用display属性取消无序列表成行显示样式,语法为“无序列表{display:inline}”。

css怎么取消无序列表的显示样式类型

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css怎么取消无序列表的显示样式类型

无序列表

无序列表的排序就是没有序号,但是默认的会在前面显示一个圆点

  • 第一句
  • 第二句
  • 第三句
  • 第四句
Nach dem Login kopieren

样例代码:

    
  • 第一句
  • 第二句
  • 第三句
  • 第四句
Nach dem Login kopieren

效果截图:
在这里插入图片描述

无序列表去掉点

通过使用list-style: none;可以去掉圆点

通过直接在ul标签里写style属性或者写个选择器,加上list-style: none;这句都可以实现去掉圆点。
样例代码:

     
  • 第一句
  • 第二句
  • 第三句
  • 第四句
  • 第一句
  • 第二句
  • 第三句
  • 第四句
Nach dem Login kopieren

效果截图:
在这里插入图片描述

成行显示

无论是有序列表还是无序列表默认都是独占一行,是按行显示的,但是我们也可以让他们在一行显示,通过display属性就可以实现了。

display属性 说明
none 不显示
block 块级元素(列显示)
inline 行内元素(行显示)

无论是块级元素还是行内元素都会忽略前面的序号(包括有序和无序的那个点)

样例代码:

     
  1. 第一句
  2. 第二句
  3. 第三句
  4. 第四句
  • 第一句
  • 第二句
  • 第三句
  • 第四句
  • 第一句
  • 第二句
  • 第三句
  • 第四句
Nach dem Login kopieren

效果截图:
在这里插入图片描述

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt voncss怎么取消无序列表的显示样式类型. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!