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 {
float:left;
显示:内联;
}
span.withbg {
width:200px;
背景:红色;
}

它在这里jsFiddle