CODEWITHSUNDEEP
htmlcss
NeXtMaN_786
NeXtMaN_786

Reputation: 681

How do I remove the space between links?

<nav id="main_nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Contact Us</a></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?

Upvotes: 3

Views: 14058

Answers (7)

harryg
harryg

Reputation: 24077

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

Upvotes: 1

j08691
j08691

Reputation: 207891

A few ways:

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.

Upvotes: 10

Pandian
Pandian

Reputation: 9126

Arrange all the list in single line will remove the space...

<li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>

Updated fiddle : http://jsfiddle.net/RYh7U/78/

Upvotes: 1

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

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:

  1. Make the li elements float: left, but be careful to not mess up the rest of your design.
  2. Write space-filling html comments between the li elements, so no "space" is recognized between them by the browser.

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20452

#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><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>
</ul>

Upvotes: 0

AnilkaBobo
AnilkaBobo

Reputation: 260

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

Upvotes: 2

Robin Schultz
Robin Schultz

Reputation: 59

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/

Upvotes: -1

Related Questions