Prevent wrapping of menu items

Question

I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu. ``` CSS CODE: #cssmenu ul { margin: 0; padding: 0;} #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} #cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); } #cssmenu > ul > li { float: left; margin-left: 30px; position: relative; } #cssmenu > ul > li > a { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-tra…

Accepted Answer

When you don't know the width because the links can differ in width you could use `display: inline-block` on the list item `

` and `white-space:nowrap` on the list itself `

` http://jsfiddle.net/Frd8J/

Prevent wrapping of menu items

Solution

Problem