Question

I want to position my navigation inline, but without space between the buttons. You can suggest some tip how to position them in the middle of the page as well. I have tried with margin:0, padding-left:0px but there are still space between them. Here is the html code:

<div id="nav">
<nav role="navigation">
<ul>
<li><a href="./" class="button" title="Go to the home page"</title>Home</a></li>
<li><a href="about.php" class="button">About</a></li>
<li><a href="contact.php" class="button">Contact</a></li>    
</ul></nav></div>

And CSS style:

.button{ 
 color: rgb(0, 0, 0);
 font-size: 15px;
padding: 11px;
   text-shadow: 0px 2px 2px rgba(144,150,150,0.75);
  background: rgb(255, 255, 248);
  background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.73);
 box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.73);
  }
 #nav li{
 display:inline;
 }

 #nav ul{
 list-style-type:none;
 margin:0;
  }
 #nav ul li a{text-decoration:none;
font:Tahoma, Helvetica, Arial, sans-serif;
letter-spacing:0.1em;

 }

Answer 1

First to center your nav into the middle of the screen use bellow.

#nav{
        width:960px; -- change me to correct size
        margin-right:auto;
        margin-left:auto;
        height:110px;  -- change me! 
}

As for list this will take list and line it up from left to right. The only gap between links should be the little padding so it doesn’t look on top of each other.

#nav ul {
    display: inline;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#nav li {
    display: inline;
    font-size: 11px;
    padding-right: 2px;
    padding-left: 2px;
    width: 100px; -- this depends on the number of buttons you have of course. 
}

Hope this helps!