在包裹图像时将项目符号与主文本对齐

Question

我完全难以解决问题..

如下图所示，我左边有一个图像，右边的文字环绕图像，我在这个文本中也有一个列表（ul），我想要的是将子弹与其余部分对齐上面的文字而不是在文本之外，同时保持它围绕图像和单个列表项内的线条彼此对齐而不是创建悬挂的段落..

这甚至可能吗？

包含以下HTML ...

<div class="entry-content">
<img src="image.jpg" alt="Pinterest" />
<p>Haven’t worked out how Pinterest could benefit you? An image sharing site that allows users to "pin" what they find onto a virtual pin board for others to enjoy, last year it reached the 10 million monthly visitors mark, the fastest of any standalone site to do so</p>
<ul>
    <li>Integration: By connecting Pinterest with your website and other social media platforms you can publish your findings in a variety of ways.</li>
    <li>Collaboration: Pinterest can allow you to share ideas within your business or with clients. Why not invite people to collaborate with you on boards?</li>
    <li>Sharing: Position yourself as a valuable resource. Create a board for your niche subject and lead the way with new ideas in your industry.</li>
    <li>Information: Data is key to the growth and development of your business. Keep an eye on what&#8217;s being pinned, how often and by how many people.</li>
    <li>Enjoyment: Pinterest gives you the opportunity to represent your company in a way it&#8217;s never usually seen. Enjoy the challenge of showing your company in a new light and build your community by pinning the inspiration of other users.</li>
</ul>
<p>As a design and digital agency Pinterest is right up our street. We&#8217;ve  started using it to collage all the wonderful things we enjoy, including ideas for our studio, general food for thought and to help us find inspiration for our journal.</p>
<p>How are you using or planning to use Pinterest?</p></div>

包括CSS ..

.blog-post img       {width:auto; float:left; margin-bottom:10px; margin-right:40px;}
.blog-post p         {margin-bottom:26px;}
.blog-post .descr ul {list-style:none; margin-left:0; padding-left:1em; text-indent:-1em;}

下面我列出了我想要瞄准的模型。

Answer 1

我意识到这已经过时了，但为了将来参考，请尝试以下方法：

list-style-position: inside;

将其添加到UL或LI元素

Answer 2

您需要做的只是float:left图片。渲染引擎应该处理其余的事情。

Answer 3

在图像底部添加一个边距，它应该将文本推回原位。