左浮动元素和无序列表(ul)

Question

我试图缩进ul的li元素.有一个左浮动的div,里面有一个图像.只有当我添加比图像本身更宽的左边距时,li元素才会缩进.

如果我向左浮动ul,这解决了问题,但是ul之后的所有元素都浮动到ul的右边.

<div class="left">
  <p ><img src='image.jpg' alt='homepage.jpg' width="360" height="395" /></p>
</div>

<p>
  Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>

<hr />

<h3>Lorem</h3>

<ul>
 <li>list element</li>
 <li>list element</li>
 <li>list element</li>
</ul>

css:

.left {float: left; }
.left img {padding-right: 20px;}
ul li { padding-left: 10px; background: blue; }

谢谢!