li和img标签不玩niceley

Question

我一直有这个问题，总是想出一些hacky解决方法。有人帮忙吗？

<ul>
 <li>hello</li>
</ul>

<img src = 'image.jpg' />

所以它们以行格式排列在一起。当我尝试使用margin-top推送列表元素时：1em没有任何反应。但是当我在ul标签上执行margin-top：1em时，它会同时将图像和li标签向下移动。我该如何解决？为什么会这样？

的jsfiddle

http://jsfiddle.net/MZhAv/

如果您更改li标签上的margin-top，您将看到它不会移动。我不明白为什么会这样。

Answer 1

• 删除display:inline的{​​{1}}，以便对图片和ul产生il效果。

• 如果您希望图片和ul彼此相邻，并且只有ul margin-top，请检查此链接：

Live demo

margin-top

修改

如果你想要右边的图像： Live Demo

HTML

ul {
    list-style: none;
    float:left;
}

li {

        //border: 1px solid black;
        margin-left: 12em;
        margin-top: 2em;
        padding-top: 1em;
    }

img {
    float:left;

}

CSS

<img src= "http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/magic-marker-icons-animals/114689-magic-marker-icon-animals-animal-cat1.png"/>
<ul>
    <li>HELLO</li>
</ul>