李スパンフロート左フロートは右

Question

私は、次の操作を行う必要があります。

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

テキスト3が右フロートさ：

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

それは次のように構成されています。

問題は、行の幅全体を埋めるために背景色が必要なので、たくさんのテキストに幅を設定する必要があるということです。私が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>

スパン{
フロート：左;
display：インライン;
}
span.withbg {
幅：200px;
背景：赤;
}

あなたがするトリングているもののここjsFiddle