How do I remove the space between links? - html

Question

<nav id="main_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Forum</li>
<li>Contact Us</li>
</ul>
</nav>
#main_nav{
background:green;
}
#main_nav li{
display:inline-block;
list-style:none;
padding:10px;
font-weight:bold;
}
#main_nav li a{
text-decoration: none;
color:white;
padding:10px;
}
#main_nav li{
-webkit-transition: opacity .5s, background .5s, color .5s;
-moz-transition: opacity .5s, background .5s, color .5s;
-o-transition: opacity .5s, background .5s, color .5s;
}
#main_nav li:hover{
color:red;
background:rgba(0, 0, 200,.5);
}
This is my navigation bar, but I have a problem. Between each link is a small space. When I hover over them quickly, it doesn't look nice. How do I remove it?

Answer 1

A few ways:
Remove the white space between the list items ( jsFiddle example)
Use comments (<!-- -->) to occupy the white space gap (jsFiddle example)
Close the list item tags on the next line (jsFiddle example)
Note that there's also a fourth option where you can set the font-size to zero on the #main_nav element, and then set the font-size on the anchors to something larger, but there have been issues with some earlier builds of Android with this technique. jsFiddle example.

Answer 2

it happens when you use display:inline-block; for list element.
you should use float:left or play with margins/paddings

Answer 3

Arrange all the list in single line will remove the space...
<li>Home</li><li>About Us</li><li>Forum</li><li>Contact Us</li>
Updated fiddle : http://jsfiddle.net/RYh7U/78/

Answer 4

See this fiddle: http://jsfiddle.net/zteA7/
It is because of inline-block creating space.
Make the <li> element floated and use the CSS :after selector to insert a clearer block element to make the nav block the height that of the menu. (no html required).
You also don't need to specify the container heights which should mean line-breaks will work

Answer 5

#main_nav li{
display:inline-block; /* the new web designer disease ?? */
list-style:none;
padding:10px;
font-weight:bold;
margin:0;
}
Just rewrite your html this way
<ul>
<li>Home</li><li>About Us</li><li>Forum</li><li>Contact Us</li>
</ul>

Answer 6

That's because of the property display: inline-block;, which causes the li "blocks" to still behave as inline elements, and therefore build spaces between them. I've had this problem a couple of times and I know two (not so beatiful) solutions:
Make the li elements float: left, but be careful to not mess up the rest of your design.
Write space-filling html comments between the li elements, so no "space" is recognized between them by the browser.

Answer 7

Remove any padding from your <ul> tag. It might be useful for you to use a reset.css to avoid problems like this http://meyerweb.com/eric/tools/css/reset/