li span float left float right

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

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

跨度{
    浮动：左;
    显示：内联;
}
span.withbg {
    宽度：200像素;
    背景：红色;
}

它在这里jsFiddle