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>