2

我完全难过试图解决一个问题..

如下图所示，我在左侧有一个图像，右侧有环绕图像的文本，我在这个文本中也有一个列表（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;}

下面我已经包含了我想要达到的目标的模型。

想要的效果

4

3 回答 3

1

我意识到这是旧的，但为了将来参考，试试这个：

list-style-position: inside;

将其添加到 UL 或 LI 元素

于 2014-11-26T16:33:25.440 回答
0

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

于 2013-09-11T15:57:14.227 回答
-2

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

于 2013-09-11T15:44:14.710 回答