user244228 user244228 - 2 months ago 5
CSS Question

can't get rid of the spaces between the links

I'm trying to make a simple responsive navigation but i can't seem to eliminate the spaces inbetween the links. Any help would greatly be appreciated.

This is my code:
css:



.nav{
width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
line-height:50px;
}
.nav li{
display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{

}
.nav a{
text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
color:#c00;background:#999999;
}





html:

<div class="nav"><!-- nav -->
<span class="menu-button"></span>
<ul class="clearfix menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/nav-->

Answer

I just switched your css a bit from display: inline to float: left for the li tags. Hope it helps, though float may not be the best approach here.

.nav li {
display: inline;
} 

to

.nav li {
float: left;
}

http://codepen.io/anon/pen/OyVLOK

Comments