Tailwind CSS - 列表样式位置

Tailwind CSS **列表样式位置** 是一个实用程序类，用于有效地控制列表项标记（项目符号和数字）相对于列表项本身的位置。

Tailwind CSS 列表样式位置类

下面列出了控制列表项标记相对于列表项内容显示位置的 Tailwind CSS 列表样式位置类。

类	CSS 属性
list-inside	list-style-image: none;
list-outside	list-style-position: outside;

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

**list-inside:** 此类将项目符号或数字放在列表项的内容区域内。
**list-outside:** 此类将项目符号或数字放在列表项的内容区域外。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 列表样式位置类示例

以下是如何在内容框内或内容框外定位列表项标记（如项目符号或数字）的 Tailwind CSS 列表样式位置类示例。

设置列表样式位置

此 HTML 示例演示了如何使用 Tailwind CSS 实用程序类（'**list-inside**' 和 '**list-outside**'）来控制列表标记（项目符号）相对于列表项的位置。'list-inside' 类将标记放在列表项内，而 'list-outside' 类将标记放在列表项外。

示例

Open Compiler

<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 列表样式位置类来控制列表项标记（项目符号）相对于列表项本身的位置。项目符号最初是隐藏的，并在悬停时在每个列表项的内部或外部可见。

示例

Open Compiler

<!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>

打印页面