0

In a navbar, which is a ul element of width 100%, there are 8 li elements.

Each of width 12.5%, so they are supposed to occupy 100% width, without spanning to the next line.

But in actual practice, the last element moves into next line. Can anybody please find the mistake.

Note: The padding, margin, left property of the ul and body are set to 0px.

body
{
 margin: 0px;
 padding: 0px;
 font-family:'Helvetica Neue', Helvetica, Arial;
 font-size: 1.5vw;
}
   
#navbar
{
 display: block;
 position: absolute;
 top: 0px;
 width: 100%;
 height: 5%;
 margin: 0px;
 padding: 0px;
 color: white;
 background-color: black;
}
   
#navbar li 
{
 display: inline-block;
 text-align: center;
 width: 12.5%;
 height: 100%;
}

#navbar a 
{
 display: inline-block;
 text-decoration: none;
 color: white;
 width: 100%;
 height: 100%;
}

#navbar a:hover 
{
 background-color: #00aaff;
 color: white;
}
   <ul id="navbar">
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Events</a></li>
 <li><a href="#">Schedule</a></li>
 <li><a href="#">Our Sponsors</a></li>
 <li><a href="#">Team 15</a></li>
 <li><a href="#">Contact us</a></li>
    <li><a style="color: #a18144" href="#">Register Now</a></li>
</ul>
Thomas Ayoub
  • 29,063
  • 15
  • 95
  • 142
Rishi
  • 45
  • 9

1 Answers1

1

You probably have white-space between the elements. Try this:

#navbar
{
    font-size: 0;
}

#navbar *
{
    font-size:1.5vw;
}

JSFiddle

Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Setting the font-size: 0 removes the text. But your white-space idea gave me a lead. I tried white-space: nowrap in navbar and it did the trick for me. But still the white-spaces are there and interfering with the design. Any ideas? – Rishi Mar 25 '15 at 07:53
  • @Rishi that's why you have to set the second rule too. That restores the font size back to it's original size. – Liftoff Mar 25 '15 at 07:54
  • @Rishi http://jsfiddle.net/54youvdz/ – Liftoff Mar 25 '15 at 07:55
  • I fixed it in the JSFiddle I gave you. You just have to change the 100% to the original size you specified: 1.5vw. The only other way to do it would be to remove the white-space from your code itself. Take out the new lines and the spaces between each
  • element.
    • – Liftoff Mar 25 '15 at 07:57