如何使用 Tailwind CSS 减少 <a> 的可点击区域

Question

我正在使用 Tailwind CSS，我最近使用 <a>、<p> 和 <div> 创建了一个 link。但是 <a> 标签的可点击区域比我想要的要大，我只想要在文本中，但是框在 div.

我将展示我的代码：

<div class="mt-5">
  <a :href="route('login')" class="flex justify-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>

事情是这样的：

Answer 1

您可以使用 inline-flex 缩小锚点的弹性框以仅包含内容，然后将内容置于周围 div 的中心。例如：

<div class="mt-5 text-center">
  <a :href="route('login')" class="inline-flex align-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>

如何使用 Tailwind CSS 减少 <a> 的可点击区域

How to reduce the clickable area for <a> with Tailwind CSS

css

tailwind-css