CSS: background color for <li> troubles (with floated <img>)

When the <li>'s have a background color and are floating up against an image that is floated left.

I would like the background color of the li to be left justified to the paragraph, not to the left edge of the page. Any bulletproof ways of doing this? I wish it was as simple as adding a display: inline; to the <ul>. A large left margin that is wider than the image is not an option, as the images will be varying widths.

Thanks for your input. This 开发者_StackOverflow中文版one has been an ongoing struggle in my designs, and I would like to figure out a perfect "fix" for this.

Fiddle here: http://jsfiddle.net/3KHKY/3/

/// css ---->

li { background-color: red; margin-left: 10px; color: white;}
img { float: left; margin-right: 10px; }

/// html --->

<p>
  <img src="http://i.ehow.com/images/a04/v1/cb/started-new-kitten-200X200.jpg" />
</p>
<h2>Title</h2>
<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
</ul>
<p>More content here.</p>

---

This behaviour is inherent in floating layouts. Floating merely pushes the internal contents of other elements to one side: in most cases it does not move the elements themselves (though clearly it can cause them to resize).

As Lex suggests, inline-block is the answer. This causes the element to act in the same way as an image, i.e. to reign in its box and keep that shape no matter what.

---

Did you mean like that?