Tailwind CSS - 列表样式位置

列表标记样式：内部与外部

Tailwind CSS 提供了工具来控制列表项标记（如圆点或数字）的位置。这个虽小但重要的细节可以显著影响列表的对齐和可读性。

列表样式位置工具类

你可以使用两个主要类来控制标记定位：

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

理解标记定位

• list-inside：标记放置在列表项的内容框内部。这意味着它成为文本流的一部分。如果列表项换行到第二行，文本将会在标记下方换行。
• list-outside：这是浏览器的默认行为。标记放置在列表项内容框的外部，在“边距槽”中。如果列表项换行，所有文本行都将垂直对齐，从而创建一个整洁的左边缘。

实用示例

示例 1：比较 list-inside 和 list-outside

此示例清晰地展示了当列表项包含足够内容以致换行时，文本对齐方式的差异。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>List Style Position</title>
</head>
<body class="bg-slate-50 font-sans p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- 列表内部（List Inside）示例 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-semibold text-slate-800 mb-3">Features (`list-inside`)</h3>
      <ul class="list-disc list-inside text-slate-600 space-y-2">
        <li>Unlimited projects and teams for better organization.</li>
        <li>Advanced analytics and reporting to track your progress effectively over time.</li>
        <li>24/7 priority support from our dedicated expert team.</li>
      </ul>
    </div>

    <!-- 列表外部（List Outside）示例 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-semibold text-slate-800 mb-3">Features (`list-outside`)</h3>
      <ul class="list-disc list-outside ml-4 text-slate-600 space-y-2">
        <li>Unlimited projects and teams for better organization.</li>
        <li>Advanced analytics and reporting to track your progress effectively over time.</li>
        <li>24/7 priority support from our dedicated expert team.</li>
      </ul>
    </div>

  </div>
</body>
</html>

可访问性与最佳实践

list-inside 和 list-outside 都完全支持可访问性，并能被屏幕阅读器正确解释。选择哪种主要取决于美观考量。然而，请记住以下几点：

• 对齐：list-outside 通常为多行列表项提供更好的文本对齐效果，这通常更受青睐以提高可读性。
• 缩进：当使用 list-outside 时，你通常需要为 <ul> 或 <ol> 元素添加外边距（margin）或内边距（padding）（例如，ml-4 或 pl-4），以防止标记悬挂在主要内容区域之外甚至屏幕外。
• 标记样式：在现代 Tailwind 中，你可以使用 marker: 变体（variant）来自定义标记本身的样式，例如：marker:text-blue-500 marker:font-bold。