html - 为什么边距顶部不起作用？

Question

<div class="right">
<div class="category-nav">
        <h2>test</h2>
    <ul class="item-list">
     <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    </ul>
    </div>

<div class="list-content-img"><img src="img_148.jpg" /></div>

风格:

.right{
float: right;
}
.category-nav {
    border: 1px solid #92D5ED;
    float: right;
    padding: 1px;
    width: 316px;
}
.category-nav ul.item-list {
    float: right;
    margin-bottom: 8px;
    overflow: hidden;
}
.list-content-img {
    height: 148px;
    margin-top: 10px;
    width: 320px;
}

为什么 list-content-img 中的 margin-top: 10px 不起作用？布局 html 结构和执行 css 的更好方法是什么？谢谢

Answer 1

在 category-nav 上你有 float:right; 在 list-content-img 上没有指定 float 。

float:none :元素不是 float 的，将显示在它出现在文本中的位置。这是默认值。

如果您将 float:right 添加到 list-content-img 您的边距有效:

http://jsfiddle.net/8vRqH/1/