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，为什么？

回答

相关问题