inline-block div將其寬度擴展到父div，爲什麼？

正如你在這個jsFiddle中看到的那樣，'innerFooter'div正在擴展到它的父'footer'，儘管它是顯示：內聯塊風格。我試過顯示：表，這是工程，只是想知道，而內聯塊不是。謝謝！inline-block div將其寬度擴展到父div，爲什麼？

HTML

<div id="footer"> 
     <div id="innerFooter" class="clearfix alignCenter"> 
      <ul id="resources"> 
       <li><a href="#"><b><u>Useful links</u></b></a></li>   
       <li><a href="#">About us</a></li> 
       <li><a href="#">Privacy</a></li> 
       <li><a href="#">Blog</a></li> 
      </ul> 
      <ul id="social"> 
       <li><a href="#"><b><u>Get social</u></b></a></li>   
       <li><a href="#">Twitter</a></li> 
       <li><a href="#">Facebook</a></li> 
       <li><a href="#">Pinrest</a></li> 
      </ul> 
      <ul id="contact"> 
       <li><a href="#"><b><u>Contact us</u></b></a></li>   
       <li><a href="mailto:emailaddress>Email us</a></li> 
      </ul>    
     </div> 
</div>

CSS

clearfix{/*Clearfix hack here*/} 
alignCenter{margin: 0 auto} 
a{color: inherit} 
#footer{ 
    color: #fff;  
    background-color: #000; 
} 
#innerFooter{ 
    display: inline-block 
} 
#footer ul{ 
    width: 200px; 
    display: inline-block; 
    margin: 0 auto; 
    float: left; 
} 
#footer ul > li{ 
    margin: 5px; 
    list-style-type: none; 
}

來源

2013-12-18 Jack Tuck

在你的小提琴中它似乎並沒有擴展到它的父母。 – davidpauljunior

這不是一個精確的模擬，因爲我在活動示例中有明確的修復代碼，所以它可能會溢出。 –

好的。只是你說，'你可以在這個小提琴裏看到'，我看不到它。在下面的答案中閱讀你的意見，你也想要中心菜單。你可以這樣做：http://jsfiddle.net/3yZmP/6/ – davidpauljunior

內頁腳已浮起在它ellements，所以其寬度，因爲所有的摘要浮起ellements'寬度（「ul」）。

來源

2013-12-18 01:25:36

浮動是不需要的，我知道，但即使沒有它，它也不會對齊到中心。 –

沒有漂浮的ellements，它是否在擴大？ –

好吧，你是對的，這是問題所在。那麼保證金不能在內嵌塊上工作嗎？ –

inline-block div將其寬度擴展到父div，爲什麼？

回答

相關問題