无涯教程网

关注我们

CSS - 列表(List)

CSS - 列表(List)

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

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

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>

它将产生以下输出-

无涯教程网

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

来源：LearnFk无涯教程网

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>

它将产生以下输出-

无涯教程网

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

来源：LearnFk无涯教程网

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>

它将产生以下输出-

无涯教程网

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

来源：LearnFk无涯教程网

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>

它将产生以下输出-

无涯教程网

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

来源：LearnFk无涯教程网

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>

它将产生以下输出-

无涯教程网

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

来源：LearnFk无涯教程网

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

技术教程推荐

10x程序员工作法 -〔郑晔〕

Java并发编程实战 -〔王宝令〕

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

Java业务开发常见错误100例 -〔朱晔〕

OAuth 2.0实战课 -〔王新栋〕

Django快速开发实战 -〔吕召刚〕

大厂设计进阶实战课 -〔小乔〕

云原生架构与GitOps实战 -〔王炜〕

结构写作力 -〔李忠秋〕

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