Question

我遇到一些CSS问题。这是我的HTML

<body>
<div id="cn">
    <div id="hd">
        <ul>
            <some li's>
        </ul>
    </div><!-- /#hd -->
    <div id="bd">
    </div><!-- /#bd -->
    <div id="ft">
    </div><!-- /#ft -->
</div><!-- /#cn -->

并且有我的CSS：

div#cn {
    position: relative;
    width: 960px;
    margin: 0 auto;
    background: #f7f7f7;
}

div#cn > * {
    position: relative;
}

div#cn div#hd {
    height: 258px;
    background: #f7f7f7 url(../img/hd.jpg);
}

div#cn div#hd ul {
    margin: 50px 0 0 0;
    padding: 0;
    list-style-type: none;
}

div#cn div#hd ul li {
    float: left;
}

div#cn div#hd ul li a {
    display: block;
    height: 35px;
    padding: 20px 25px 0 25px;
    font-weight: bold;
    background: pink url(../img/nava.jpg) right 0 no-repeat;
}

现在，保证金不会影响UL，而是影响它周围的Div（#hd）。它就像我在#hd上的边距而不是在ul ...现在它变得奇怪，如果我设置边框到#hd它的工作原理！（或者，如果我在UL工作之前完成了工作）

有多奇怪？有人可以告诉我为什么会这样，以及我如何正确地解决这个问题。（它不想设置边框使其工作：P）

Answer 1

您的边距看起来正在崩溃（http://www.w3.org/TR/CSS2/box.html#collapsing-margins）。

尝试：

div#cn div#hd ul {display: inline-block}

Answer 2

我刚遇到类似的问题，只需在父元素中添加一些填充即可解决问题。

div#cn div#hd{ padding: 1px 0; margin: -1px 0; }

保证金溢出问题

2 个答案: