在环绕图像时将项目符号与正文对齐

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

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

Answer 3

您需要做的就是float:left 图像。渲染引擎应该负责其余的工作。