Question

我只想根据占用的内容宽度应用背景色。我使用了以下两个片段。

// this applies for the entire row and not for the text occupied
<p style="padding: 10px; background: #77bb77; color: #fff; border-radius: 10px; text-align:right">
   Text me
</p>

// if text is larger than width of <p> then text wraps to next row
// and it is not applying padding correctly on the second row 
<p style="text-align: right">
  <span style="padding: 10px; background: #77bb77; color: #fff;border-radius: 10px;">
     Text me
  </span>
</p>

请检查小提琴https://jsfiddle.net/adww60ry/

Answer 1

我认为你要找的是风格display: inline-block;

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

试试这个：

  <span style="padding: 10px; background: #77bb77; color: #fff;border-radius: 10px;display:inline;">
 Text me

似乎工作正常。 https://jsfiddle.net/ndt2db12/

根据内容宽度将背景颜色应用于宽度

2 个答案: