html - li span 向左浮动 向右浮动

Question

我需要做以下事情:

|text1| lots of text lots of text lots |text3|
lots of text lots of text lots of text lots 
of text

结构如下:

<li><span>text1</span><span>text3</span><span>lots of text</span></li>

text3 向右浮动。

问题是我需要在很多文本上设置宽度，因为我需要背景颜色来填充行的整个宽度。如果我将它设置为 float:left，它会下降一行并且与 text1 或 text2 不在同一行。

Answer 1

像这样

jsFiddle

span {
  float: left;
  display: inline;
}

span.withbg {
  width: 200px;
  background: red;
}

<ul>
  <li>
    <span id="left">text1</span>
    <span class="withbg">lots of text</span>
    <span id="right">text3</span>
  </li>
</ul>