我正在尝试 "draw" 使用跨度的圆圈，有时有效，有时无效

Question

这让我很困惑。我正在写一个 Laravel 应用程序，我想在描述之外画一个圆圈。根据条件，圆圈必须是灰色或黄色，所以我的代码是：

...
<ul>
  @foreach ($section->lessons as $lesson)
    <li class="flex items-start mb-1">
      <span class="inline-block 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>
...

此代码有效，没问题，但显示有问题。检查span顺风类："inline-block w-4 h-4 mt-1 mr-2 bg-yellow-400 }} rounded-full"，这应该画一个完美的圆（w-4 h-4）吧？

现在看看它显示的内容：

如您所见，对于单行描述，圆是完美的，但是对于有两行的描述，它变成了椭圆形，并且边距稍微向左移动

为什么会发生这种情况，我该如何解决？

Answer 1

您有一个弹性容器，因此您不需要 inline-block 跨度，但弹性也是您的长行跨度元素被压扁的原因。

一个简单的解决方法是将 flex-shrink-0 添加到这些跨度。

这里正在开发 Tailwind Play https://play.tailwindcss.com/H0kZFOVNaX

<ul>
    <li class="flex items-start mb-1">
      <span class="w-4 h-4 mt-1 mr-2 bg-gray-500 rounded-full"></span>
      <a
        class="cursor-pointer"
        wire:click="changeLesson({{ $lesson }})"
        >Some regular sized content</a>
    </li>
    <li class="flex items-start mb-1">
      <span class="w-4 h-4 flex-shrink-0 mt-1 mr-2 bg-gray-500 rounded-full"></span>
      <a
        class="cursor-pointer"
        wire:click="changeLesson({{ $lesson }})"
        >Some extra large XXXL sized content that has way too long of a title and can smash an inline element.</a>
    </li> 
</ul>

我正在尝试 "draw" 使用跨度的圆圈，有时有效，有时无效

I'm trying to "draw" a circle using a span, sometimes work, sometimes doesn't

tailwind-css