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> 

see fiddle


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

qt - How to embed QML toolbar and menubar into QMainWindow -