CODEWITHSUNDEEP
csshtml
KyelJmD
KyelJmD

Reputation: 4732

Setting Navigation List items to stick together

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?

Upvotes: 1

Views: 701

Answers (3)

Desmond Hume
Desmond Hume

Reputation: 8617

The space you see between the items is the result of new lines you put after each <a> element in the HTML code. So placing all the links in a single line would solve the problem in the most straightforward way:

<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>

Upvotes: 1

Jack
Jack

Reputation: 1472

do this on your .menu class

 .menus
{
  display:block; 
  float:left;
}

check this : http://jsfiddle.net/GgsDv/1/

Upvotes: 1

alex
alex

Reputation: 490433

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.

Upvotes: 2

Related Questions