如何让标题在同一行？答案

【问题标题】：How do I get a title to be on the same line?如何让标题在同一行？
【发布时间】：2020-08-18 22:42:06
【问题描述】：

我不能让“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>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

将float-right 类添加到“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>

【讨论】：