如何获取内联行，即背景仅跨越内容并保持间距

Question

实时代码：https://codepen.io/matthewharwood/pen/GRZqRRx?editors=1000

问题：如何删除那个白色背景并让背景跨越内容宽度 + 填充？

<div class="container">
    <div class="grid grid-cols-3 gap-20">
      <div class="h-0  pt-full relative">
        
        <div class="inset-0 absolute w-full h-full rounded-full overflow-hidden">
          <img  src="https://res.cloudinary.com/morningharwood/image/upload/f_auto,q_auto/samples/people/smiling-man.jpg" class="object-cover h-full" />
        </div>
              
        <div class="absolute bottom-20-p left-half">
            <p class="bg-white text-black px-2 py-1 mb-2 whitespace-no-wrap">Matthew harwood</p>
            <p class="bg-white text-black px-2 py-1 whitespace-no-wrap">Front-end</p>
        </div>
     
      </div>

  </div>
</div>

Answer 1

将此添加到您的 css 中：

.whitespace-no-wrap {
/* white-space: nowrap; */
display: inline-block;

}

Answer 2

无需更改 CSS 使用 talwind 类:

.pt-full {
  padding-top: 100%;
}
.bottom-20-p {
  bottom: 20%;
}

.left-half {
  left: 50%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css">
<div class="container">
    <div class="grid grid-cols-2 gap-20">
      <div class="h-0  pt-full relative">
        
        <div class="inset-0 absolute w-full h-full rounded-full overflow-hidden">
          <img  src="https://res.cloudinary.com/morningharwood/image/upload/f_auto,q_auto/samples/people/smiling-man.jpg" class="object-cover h-full" />
        </div>
              
        <div class="absolute bottom-20-p left-half flex flex-col items-start">
            <p class="bg-white text-black px-2 py-1 mb-2 whitespace-no-wrap">Matthew harwood</p>
            <p class="bg-white text-black px-2 py-1 whitespace-no-wrap">Front-end</p>
        </div>
     
      </div>

  </div>
</div>

如何获取内联行，即背景仅跨越内容并保持间距

How to get inline rows thats background spans only the content and maintains spacing

html

css

tailwind-css