左浮动元素和无序列表（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; }

谢谢！