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

Question

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

5

我试图让文字在左侧，图标在右侧，但现在图标位于文字上方，如第一张图片所示。我希望该图标位于“项目名称”的右上角，并使文本看起来像第二张图片。

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


<!-- Body -->
<div class="flex card bg-neutral h-48 px-3 hover:bg-primary">
  <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>
  <h2 class="text-2xl font-bold text-white py-3">Project name</h2>
  <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>

- Milton C

请分享CSS代码给我们以便协助。 - Can O' Spam

1

@CanO'Spam 这个问题明确标记为 tailwind。可能没有 CSS，对于一个带有框架标签的问题也不应该是必需的。 - tacoshy

4个回答

6

这里提供的解决方案充满样板代码。以下是使用 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>

- Jurass

太棒了，谢谢！ - undefined

1

您可以在justify-between类后面添加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 items-center">
    <h2 class="text-2xl font-bold text-dark 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>

- user18265126

0

希望这可以帮到你。

 <div class="flex items-center">
          <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="11" />
            <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
          </svg>
          <p class="ml-4">
            Icons
            <code class="text-sm font-bold text-gray-900">Next to Text...!</code> file
          </p>
        </div>

- xDre4M

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmad Alfy · Accepted Answer

将标题和图标都放在一个带有类名为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>