Question

我无法解决这个问题，因为一些奇怪的原因，DIV正确地水平对齐，但第二个div最终在第一个div之下。任何帮助将不胜感激。

HTML：

<footer>
    <div class="inner">
    <section id="footer-copyright" class="clear left">
    <ul>
    <li>© 2013
    <a href="/">Company</a>
    |
    <a href="sitemap.html">Sitemap</a>
    |
    <a href="privacy.html">Privacy Policy</a>
    </li>
    </ul>
    </section>
    <section class="footer-box clear right">
    <ul>
    <li>Design by <a href="/" target="new">Template</a></li>
    </ul>
    </section>
    </div>
</footer>

CSS：

footer .inner {
    padding-top: 50px;
}

#footer-copyright {
    display: block;
    padding-top: 35px;
    width:50%;
}

#footer-box {
    display: block;
    padding-top: 35px;
}

footer ul {
    color: #FFFFFF;
    list-style: none outside none;
    padding: 10px 0;
}

.inner {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

.clear {
    clear: both;
    display: block;
}

.right, .alignright {
    float: right;
}

.left {
   float:left;
}

也许我只需要一双新鲜的眼睛...... :)

您可以查看有用的链接here

Answer 1

这是因为您的footer-box具有clear: both;规则集（来自clear类）。删除它并添加padding-top: 35px。

Answer 2

#footer-box由于其clear: both级而有clear，所以它会在#footer-copyright以下清除。

HTML5 / CSS DIV没有水平对齐？

2 个答案: