HTML5 / CSS的DIV水平对齐有问题？

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;
}

也许我只需要新鲜的视角... :)

您可以在这里查看可用链接。

- Adam Huddleston

Answer 1

这是因为您的footer-box设置了clear: both;规则（来自clear类）。请将其删除并添加padding-top: 35px。

- Shomz

---

我知道的...一双新眼睛...谢谢！ - Adam Huddleston

Answer 2

#footer-box由于其clear类具有clear:both属性，因此它在#footer-copyright下方进行了清除。

- Interrobang