Laravel项目中用Tailwind span画圆单行正常多行变形如何解决

问题成因 #

1. Flex子元素默认收缩规则：你使用的<li>是Flex容器，作为直接子元素的状态<span>默认flex-shrink: 1，当右侧文本长度超出容器剩余横向空间时，Flex布局会自动压缩左侧span的宽度，导致你预设的w-4宽度被缩小，宽高不再相等，正圆就变成了椭圆。
2. 边距偏移的原因：你给span加了mt-1做手动顶部对齐，而单行、多行文本的行高计算存在差异，再加上元素被挤压后的尺寸变化，就会出现视觉上的边距偏移问题。

修复方案 #

仅需调整两处Tailwind类即可解决，无需修改业务逻辑：

• 给状态<span>添加flex-shrink-0（或flex-none）类，禁止Flex布局收缩该元素，保证宽高固定为w-4 h-4
• 移除<span>上不必要的inline-block类（Flex子元素会自动被块级化，该属性不生效），对齐改为通过Flex容器属性控制更稳定

修复后的代码如下：

...
<ul>
  @foreach ($section->lessons as $lesson)
    <li class="flex items-start mb-1">
      <span class="flex-shrink-0 w-4 h-4 mt-1 mr-2 {{ $lesson->complete ? 'bg-yellow-400' : 'bg-gray-500' }} rounded-full"></span>
      <a
        class="cursor-pointer"
        wire:click="changeLesson({{ $lesson }})"
        >{{ $lesson->name }}</a>
    </li>
  @endforeach
</ul>
...

如果需要状态圆和多行文本垂直居中，直接把<li>的items-start改成items-center，同时删掉<span>的mt-1即可。

内容的提问来源于stack exchange，提问作者luisfer