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:** 此類將專案符號或數字放在列表項的內容區域外。

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>

列印頁面