笙亿网络策划

Tailwind CSS 怎么设置 list-style-type 列表样式类型？

约 6 分钟读完 36 阅
文章导读
Previous Quiz Next List Style Type 在 Tailwind CSS 中是一组预定义的 class，用于快速设置无序列表和有序列表的列表标记样式，例如项目符号或数字。
📋 目录
  1. 壹 Tailwind CSS List Style Type Classes
  2. 贰 Tailwind CSS List Style Type Classes 的功能
  3. 叁 Tailwind CSS List Style Types Class 示例
  4. 肆 应用不同的列表样式类型
  5. 伍 带悬停效果的列表样式类型
A A

Tailwind CSS - 列表样式类型

Previous
Quiz
Next

List Style Type 在 Tailwind CSS 中是一组预定义的 class，用于快速设置无序列表和有序列表的列表标记样式，例如项目符号或数字。

Tailwind CSS List Style Type Classes

下面是 Tailwind CSS List Style Type class 列表及其属性，用于修改列表项的样式和外观。

Class CSS Properties
list-none list-style-type: none;
list-disc list-style-type: disc;
list-decimal list-style-type: decimal;

Tailwind CSS List Style Type Classes 的功能

  • list-none: 该 class 会移除列表项标记，因此不会有项目符号或数字。
  • list-disc: 该 class 会在每个列表项前添加圆点项目符号。
  • list-decimal: 该 class 会在每个列表项前添加数字，创建有序列表。

Tailwind CSS List Style Types Class 示例

下面是 Tailwind CSS List Style Type class 的示例，展示如何使用 Tailwind CSS 的不同 utility class 来改变列表项的外观。

应用不同的列表样式类型

此示例使用 Tailwind CSS 的 list style type class 将默认列表项目符号替换为不同样式。您将看到带有圆点项目符号、十进制数字以及无列表标记的列表示例，以突出差异。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1>  
    <p class="underline">
        Applying <strong>List-desc</strong> class to List
    </p>
    <ul class="list-disc ml-4 mb-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>   
    <p class="underline">
        Applying <strong>List-decimal</strong> class to List
    </p>
    <ul class="list-decimal ml-4 mb-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
    <p class="underline">
        Applying <strong>List-none</strong> class to List
    </p>
    <ul class="list-none">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

带悬停效果的列表样式类型

本示例展示了如何使用 Tailwind CSS 的 List Style Type 类结合 hover effects 来改变列表项的外观。悬停在列表项上查看不同的列表标记。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS List Style Types
    </h1> 
     <h2 class="text-xl underline mt-8 mb-4">
         Hover to Display List Item Types
     </h2>
    <ul class="space-y-4"> 
        <li class="hover:text-blue-600 
            hover:before:content-['']">
            Disc marker on hover
        </li> 
        <li class=" hover:text-blue-600 
            hover:before:content-['1.']">
            Decimal marker on hover
        </li>
        <li class="hover:text-blue-600 ">
            No marker, nothing shows on hover
        </li>
    </ul>
</body>

</html>