Question

Assuming that I have this navigation bar

<div id = "nav">
        <a class = "menus" href = "#">Home</a>
        <a class = "menus" href = "#">Archive</a>
        <a class = "menus" href = "#">Blog</a>
        <a class = "menus" href = "#">Lab</a>
        <a class = "menus" href = "#">About</a>
      </div>

And I have this CSS rule

#nav{position:absolute; top:20%;}
.menus{border:1px solid black;}
.menus:hover{background-color: pink;}

How would I set each item to stick together? in the given output There is always a spacing in between each navigation items. how would I set them to stick together?

Answer 1

There are a few ways, but the most simple would be to float the elements.

#nav a {
   float: left;
}

jsFiddle.

So long as are not inheriting other styles that you haven’t posted, this should do it.

The problem is the whitespace between the a elements are being rendered as a space. Browsers collapse multiple whitespace to one space when rendering.

jsFiddle.