2

CSS:

body {
    margin: 0;
    padding: 0;
}
#nav {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    min-height:40px;
    background-color:#fafafa;
    border:1px solid #d4d4d4;
}
#nav li {
    display:inline;
}
#nav a {
    display:inline-block;
    padding: 10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:20px;
    color:#333;
    text-decoration:none;
    margin: 0 !important;
}
#nav li.active a, #nav li a:hover {
    color:#555;
    background-color:#e5e5e5;
}

HTML:

<ul id="nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/portfolio/">Portfolio</a></li>
    <li><a href="/archives/">Archives</a></li>
    <li><a href="/resources/">Resources</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

http://jsfiddle.net/hdZNL/

I searched and found this: CSS - <li> Items in Horizontal Menu have a Gap Between Them and it does remove the gaps but it throws everything to the left. I want the menu centred.

Community
  • 1
  • 1
user3326894
  • 23
  • 3
  • I would delete my answer as my method is same as the second answer in that question, I realized that after answering, so please refer to that method, it's perfect... – Mr. Alien Feb 19 '14 at 07:34

2 Answers2

0

You can add empty comments between list items 

<li class="active"><a href="/">Home</a></li><!--
--><li><a href="/about/">About</a></li>

Here is a sample

user2167382
  • 346
  • 1
  • 3
  • 14
0

As said in the post CSS -

  • Items in Horizontal Menu have a Gap Between Them

    • display:inline respects the whitespace between elements and also puts them "inline". A quick and dirty solution would be to remove whitespace between li elements.

    <ul id="nav">
<li class="active"><a href="/">Home</a></li><li><a href="/about/">About</a></li>

    And so on.

    Community
    • 1
    • 1
    Oskars Pakers
    • 699
    • 3
    • 11