Question

HTML的骨架就是这个

<div class="TwoCol">
<img src="imgurl"/>
<h1>A headline</h1>
<p>Some exciting text</p>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>More riveting text </p>
</div>

CSS

.TwoCol img{
    float:left;
    padding-right:5px;
    border:none;
}
.TwoCol ul{
list-style-type:none;
}

我所追求的效果是在我的div中左上方的图像，文本在右侧，如果文本比它在图像下包裹的图像长。

但是，如果列表从图像的右侧开始，我希望所有项目在彼此下方垂直对齐，而不是图像下方的列表项目显示在图像下方，并将列表分成两部分。

我需要一个图像素描工具：）

这个

IMG Headline
IMG Para1
IMG Item A
    Item B
    Item C
Para2

不是这个

IMG Headline
IMG Para1
IMG Item A
Item B
Item C
Para2

谢谢！

Answer 1

您可以将<ul>设置为

display: inline-block;

您可能还想clear: left;您的图片，因为它们可能会根据其他内容开始彼此相邻堆叠。

Answer 2

在margin-left添加ul，即图片的宽度（或更多）。

Answer 3

id说将图像设置为背景图像，然后给出ul或li左边距。确保您已将填充和边距重置为0或输出将区分跨浏览器

如何使用CSS将List项目保持在一起？

3 个答案: