jquery - 使用 css 让背景颜色始终环绕文本

Question

我目前有这个:

这是 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`>

现在我的问题是 fix geysers 的蓝色到了 li 标签的末尾。现在要解决这个问题很简单。我只是为 p 标签设置了一个 width:7em 。但我想知道的是，他们现在是一种指定宽度并始终只让背景颜色环绕文本的方法吗？我这样做的原因是我将从数据库中提取的服务和文本长度会有所不同。我只想让蓝色包裹文本。我不确定如何根据文本动态执行此操作。

Answer 1

这里有 2 个解决方案。

将文本包裹在一个 span 中并为其赋予背景颜色:

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

或者将 display : inline-block 添加到 p (但它可能会改变你的布局):

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

查看实际效果:http://jsfiddle.net/pDpSq/