无涯教程网

关注我们

CSS - 列表(List)

CSS - 列表(List)

本章教您如何使用CSS控制list type，position，style等。

无涯教程有以下五个CSS属性，可用于控制列表-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-lists.html

来源：LearnFk无涯教程网

list-style-type : 设置列表项标志的类型。
list-style-position : 设置列表中列表项标志的位置。
list-style-image : 将图象设置为列表项标志。
list-style : 简写属性。用于把所有用于列表的属性设置于一个声明中。
marker-offset : 指定标签与列表中文本之间的距离。

现在将通过示例了解如何使用这些属性。

list-style-type 属性

通过 list-style-type 属性，可以在无序列表的情况下控制项目符号点的形状或样式，并在有序列表的情况下控制编号字符的样式。

这是可以用于无序列表的值-

Sr.No.	Value & Remark
1	none NA
2	disc( default ) 实心圆
3	circle 一个空圆
4	square 实心方块

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

list-style-position 属性

list-style-position 属性指示标签应出现在包含项目符号点的框的内部还是外部。它可以是两个值之一-

Sr.No.

Value & Remark

1

none

NA

2

inside

列表项目标签放置在文本以内，且环绕文本根据标签对齐。

3

outside

默认值。保持标签位于文本的左侧。列表项目标签放置在文本以外，且环绕文本不根据标签对齐。

这是一个例子-

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

list-style-image 属性

列表样式图像允许您指定图像，以便可以使用自己的符号样式。如果找不到给定的图像，则使用默认符号。

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

list-style 属性

列表样式允许您将所有列表属性指定为一个表达式。这些属性可以按任何顺序出现。

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

marker-offset 属性

marker-offset 属性可让您指定标签和与该标签有关的文本之间的距离。

<html>
   <head>
   </head>

   <body>
      <ul style="list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

深入剖析Kubernetes -〔张磊〕

如何设计一个秒杀系统 -〔许令波〕

消息队列高手课 -〔李玥〕

浏览器工作原理与实践 -〔李兵〕

接口测试入门课 -〔陈磊〕

RPC实战与核心原理 -〔何小锋〕

手把手带你搭建秒杀系统 -〔佘志东〕

Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕

朱涛 · Kotlin编程第一课 -〔朱涛〕

好记忆不如烂笔头。留下您的足迹吧 :)