如何让标题位于同一行？

Question

我无法让“Chris Farrugia”和“5 Stars”在同一条线上。在CodePen中，你会看到我的名字实际上低于右边的5星。

在 Tailwind 中，如何让这两个在同一条线上？

body {
  background: #e3e3e3;
  padding: 3rem;
}

figure {
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
  <img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
  <figcaption class="bg-white p-5">
    <div class="text-right">5 Stars</div>
    <h3>Chris Farrugia</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, provident cupiditate tempora, aspernatur quos assumenda iure facilis enim velit ea doloremque, odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla, error doloremque
      sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
    <a href="#">Read More</a>
  </figcaption>
</figure>

Answer 1

将 float-right class 添加到“5 星”。

body {
  background: #e3e3e3;
  padding: 3rem;
}

figure {
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
  <img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
  <figcaption class="bg-white p-5">
    <div class="text-right float-right">5 Stars</div>
    <h3>Chris Farrugia</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, provident cupiditate tempora, aspernatur quos assumenda iure facilis enim velit ea doloremque, odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla, error doloremque
      sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
    <a href="#">Read More</a>
  </figcaption>
</figure>

如何让标题位于同一行？

How do I get a title to be on the same line?

css

tailwind-css