2013-01-21 99 views
3

我很難得到這個工作,由於一些奇怪的原因DIV的水平正確對齊,但第二個div結束了第一個。任何幫助將不勝感激。HTML5/CSS 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

回答

2

這是因爲你的footer-boxclear: both;規則集(來自clear類)。刪除它並添加padding-top: 35px

+0

我知道了..一套新的眼睛..謝謝! –

1

#footer-box由於其clear類別,所以它的清除低於#footer-copyright

+0

工作!謝謝! :) –