使用 Tailwind CSS 将文本和图标放在同一行？

Question

我试图获取左侧的文本和右侧的图标，但现在图标位于文本上方，请参见第一张图片。我希望图标位于 \xe2\x80\x9c 项目名称\xe2\x80\x9d 右侧的右上角，并且文本与第二张图片类似。

\n

\r\n

\r\n

<!-- Tailwind -->\n<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">\n\n\n<!-- Body -->\n<div class="flex card bg-neutral h-48 px-3 hover:bg-primary">\n  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />\n  </svg>\n  <h2 class="text-2xl font-bold text-white py-3">Project name</h2>\n  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>\n  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>\n</div>

\r\n

\r\n

\r\n

\n

\n

\n

Answer 1

将标题和图标都包含在div带有 class 的a 中flex。这样它们就会被放置在同一行。

您还可以添加justify-between将图标移动到右角。

Cornel Raiu 在评论中提出了一个很好的建议，即添加items-center到组合中，以垂直对齐标题和图标。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<div class="card bg-neutral h-48 px-3 hover:bg-primary">
  <div class="flex justify-between">
    <h2 class="text-2xl font-bold text-white py-3">Project name</h2>
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  </div>
  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>

Answer 2

这里提供的解决方案充满了样板代码。这是使用inline-flex和span 的简单解决方案：

<p>
Today I spent most of the day researching ways to ...
<span class="inline-flex items-baseline">
    <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
    <span>Kramer</span>
</span>
keeps telling me there is no way to make it work, that ...
</p>