CODEWITHSUNDEEP
htmlcss
tomsullivan1989
tomsullivan1989

Reputation: 2780

CSS grid-style navigation menu spacing

I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.

At the moment I have:

#nav {
    float:left;
    width:230px;
    display:inline;
    text-align:right;
}

#footer li {
    display:inline-block;
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
}

If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.

Upvotes: 0

Views: 1550

Answers (3)

George
George

Reputation: 36784

That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.

There are a number of ways to overcome this. One is commenting out the whitespace:

<li class="green"><a href="#">Home</a></li><!--
--><li class="green"><a href="#">FAQs</a></li>

JSFiddle

Or you could use floating:

#footer li {
    float:left;
}

JSFiddle

Upvotes: 1

Chad
Chad

Reputation: 5408

My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.

#nav {
    font-size: 0;
}
#nav ul li {
    font-size: 15px;
}

Check it out: http://jsfiddle.net/3XqZ3/9/

Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.

#nav ul li {
    float: left;
}

A third option would be to make sure that there are no breaks in between elements in the html. Like:

<li>This is an li</li><li>This is another li</li>

Or:

<li>This is an li</li><!--
--><li>This is another li</li>

Upvotes: 1

Duver
Duver

Reputation: 500

You should use float instead of display, like this:

#footer li {
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
    float: left;
}

Demo: http://jsfiddle.net/3XqZ3/11/

Upvotes: 0

Related Questions