如何将我的文本放在顺风中的一行中？

Question

我希望结果是这样的

但这就是我得到的

用我的精简代码：

<div
  style="background-image: url('{unsplash?.url}');"
  class="bg-black flex items-center justify-center min-h-screen bg-cover"
>
  <Authenticate />

<!-- here is my div -->

  <div class="block flex absolute bottom-9 left-5 h-16 w-16">
    <img src={unsplash?.author.avatar} alt={unsplash?.author.username} class="rounded-full" />
    <p class="inline-block text-blank ml-2">
      By <a class="inline-block" target="__blank" href={unsplash?.author.url}
        >{unsplash?.author.username}</a
      >
    </p>
    <p class="inline-block text-black">
      Find similar pictures on <a class="inline-block" target="__blank" href="http://unsplash.com"
        >Unsplash</a
      >
    </p>
  </div>
</div>

我使用了内联块，但不起作用

Answer 1

您可能想要空白whitespace-nowrap，尽管您white-space: nowrap; 可能会查看断字和文本溢出

Answer 2

在父 div 中提供更多宽度，从 w-16 到 w-[90%]