0
Как вы можете видеть в этом jsFiddle, div 'innerFooter' расширяется до своего родительского нижнего колонтитула, несмотря на его отображение: стиль inline-block. Я попробовал display: table, который WORKS, просто интересно, когда 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;
}
В вашей скрипке он, кажется, не расширяется до своего родителя. – davidpauljunior
Это не точное моделирование, поскольку у меня был четкий код исправления в живом образце, поэтому он, вероятно, переполнен. –
Хорошо. Просто ты сказал: «Как ты видишь в этой скрипке», и я не мог этого видеть. Читая ваши комментарии в ответе ниже, вы также хотите центрировать меню. Вы можете сделать это вот так: http://jsfiddle.net/3yZmP/6/ – davidpauljunior