Jquery 使用css使背景颜色始终仅环绕文本

我目前有：

以下是HTML：

`<li>
   <a href="#companyprofile">
      <img class="ui-li-thumb picture" src="img/album-bb.jpg">  
      <h3>Acura</h3>
      <p>Rating: <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span> 
      <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span></p>
      <p class = "open">open</p>
      <p style="background-color:blue !important;">Fixes Geysers</p>
  </a></li`>

`

---

现在，我的问题是，修复间歇泉的蓝色标记位于li标记的末尾。现在解决这个问题很简单。我只是给p标签设置了一个宽度：7em。但我想知道的是，他们现在是不是可以指定宽度，并且总是让背景颜色环绕文本？我这样做的原因是我将从数据库中获取服务，并且文本长度会有所不同。我只想用蓝色把文字包起来。我不知道如何根据文本动态地执行此操作。

CSS文件比内联CSS更受欢迎，但如果您将最后一段更改为“显示：内联块”，则应将宽度缩小到内容

  <li>
     <a href="#companyprofile">
        <img class="ui-li-thumb picture" src="img/album-bb.jpg">  
        <h3>Acura</h3>
        <p>Rating: <span class="fa fa-star fa-1x" style="color:yellow"></span>
        <span class="fa fa-star fa-1x" style="color:yellow"></span> 
        <span class="fa fa-star fa-1x" style="color:yellow"></span>
        <span class="fa fa-star fa-1x" style="color:yellow"></span>
        <span class="fa fa-star fa-1x" style="color:yellow"></span></p>
        <p class = "open">open</p>
        <p style="background-color:blue !important; display: inline-block">Fixes Geysers</p>
    </a></li>

这里有两种解决方案

将文本包装在跨距内，并为其指定背景色：

<p><span style="background-color:blue !important;">Fixes Geysers</span></p>

看看它的作用：

修复间歇泉

---

然后你可以在span上应用你想要的任何东西：）正是

导致了这个问题

使用

span

而不是

p

，你根本不需要使用宽度。aaaaaaaaaaaaaaaaaatauche！非常感谢。

<p style="background-color:blue !important; display : inline-block;">Fixes Geysers</p>

<span style="background-color:blue !important;">Fixes Geysers</span>