html - Inline Block Elements Overflowing Parent Container -
i have list of 4 menu items sitting side side using display:inline-block;. each item 120px, therefore should able set parent container 480px wide, sends last item next row, why ??
here jsfiddle :http://jsfiddle.net/htdgdhxn/
my html:
<section id="nav"> <div id="nav-wrapper"> <ul id="nav-list"> <li id="nav-home"><a href="index.php">home</a> </li> <li id="nav-clothes"><a class="category all">clothes</a> </li> <li id="nav-about"><a href="aboutus.php">about us</a> </li> <li id="nav-contact"><a href="contactus.php">contact us</a> </li> </ul> </div> </section>
css:
* { margin: 0px; padding: 0px; } #nav { background-color: #fff; } #nav-wrapper { text-align: center; height: 74px; } #nav-list { height: 100%; width: 480px; } #nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; } #nav-list li { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; } #nav-list li a:hover { background-color: #f0ece1; cursor: pointer; }
i have tested , happens in chrome, ie , firefox.
remove whitespace between each <li>
<li></li> <...space here...> <li></li>
inline block elements create gap between li elements.
<ul id="nav-list"> <li id="nav-home"><a href="index.php">home</a> </li><li id="nav-clothes"><a class="category all">clothes</a> </li><li id="nav-about"><a href="aboutus.php">about us</a> </li><li id="nav-contact"><a href="contactus.php">contact us</a> </li> </ul>
Comments
Post a Comment