html - img float:left - margin elements on the right

Question

As you can see in this example http://jsfiddle.net/PCcj8/ I'd like to add some margin to my unordered list. However, I'm not able to move that list because of that img float. How can I achieve it? Please consider there can be different images of different widths.

Answer 1

<ul>将您的标签包装在这样的<span>标签<span>标签中：

<span>
<ul>
    <li>test</li>
    <li>test</li>
</ul>
</span>

然后像这样设置跨度：

span{
    display: inline-block;
    margin-left: 20px;    
}

Answer 2

该 UL 的新样式定义：

ul {边距：0 0 0 -5px; 显示：内联块；}

它会为订单项留下一点缩进，它会与您可能放在一边的任何图像一起移动。

这是一个分叉的小提琴：在此处输入链接描述