Tailwind CSS - 列表样式位置

Tailwind CSS List Style Position 列表样式位置 是一个实用类，用于有效控制列表项标记(项目符号和数字)相对于列表项本身的位置。

Tailwind CSS 列表样式位置类

以下是 Tailwind CSS 列表样式位置类的列表，用于控制列表项标记相对于列表项内容的显示位置。

Tailwind CSS 列表样式位置类的功能

• list-inside:此类将项目符号或编号置于列表项的内容区域内。
• list-outside:此类将项目符号或编号置于列表项的内容区域之外。

Tailwind CSS 列表样式位置类示例

以下是 Tailwind CSS 列表样式位置类的示例，展示了如何将列表项标记(例如项目符号或编号)定位在内容框的内部或外部。

设置列表样式位置

此 HTML 示例展示了如何使用 Tailwind CSS 实用类("list-inside"和"list-outside")来控制列表标记(项目符号)相对于列表项的定位。'list-inside' 类将标记置于列表项内部，而 'list-outside' 类则将标记置于列表项外部。

示例

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

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

</html>

悬停查看列表项位置

此示例展示了如何使用 Tailwind CSS 列表样式位置类来控制列表项标记(项目符号)相对于列表项本身的位置。项目符号最初是隐藏的，悬停后会在每个列表项的内部或外部显示。

示例

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS List Style Position
    </h2>  
    <p class="text-xl font-semibold mb-2 underline">
         Hover to see List Style Position Classes
    </p> 
    <div class="ml-4"> 
        <p class="underline">
            Applying <strong>list-inside</strong> class to List
        </p> 
        <ul class="list-inside">
            <li class="list-none hover:list-disc">1 cup strawberries</li>
            <li class="list-none hover:list-disc">1/2 cup blueberries</li>
            <li class="list-none hover:list-disc">1 banana</li>
        </ul>
       <p class="underline">
            Applying <strong>list-outside</strong> class to List
        </p>
        <ul class="list-outside">
            <li class="list-none hover:list-disc">1 cup strawberries</li>
            <li class="list-none hover:list-disc">1/2 cup blueberries</li>
            <li class="list-none hover:list-disc">1 banana</li>
        </ul>
    </div> 
</body>

</html>