我试着用一个跨度来“画”一个圆，有时工作，有时不工作

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 Tailwind类："inline-block w-4 h-4 mt-1 mr-2 bg-yellow-400 }} rounded-full"，这应该画出一个完美的圆(w-4 h-4)，对吗？

现在看看它显示了什么：

​

​

正如您所看到的，对于单行描述，圆圈是完美的，但是对于有两行的描述，它变成了一种椭圆形，并且它将页边距稍微向左移动

为什么会发生这种情况?我如何修复它？

Answer 1

您有一个flex容器，所以跨度上不需要inline-block，但是flex也是长线跨度元素被压缩的原因。

一个简单的解决方法是将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>