Center nav list and remove default spacing?

Question

I have a nav list that i centered, but there is some default spacing that i don't want. Also in the fiddle example you can't see it, but on my end the nav list isn't really centered with the same css etc. Maybe someone can look at the code to see if it really centers the nav list.

--> Fiddle

<header>
<nav>
    <ul>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Work</span></a></li>
        <li><a href="#"><span>Information</span></a></li>
    </ul>
</nav>
</header>

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Vucko, Mar 08 '15 at 15:07

marsh · Answer 1 · 2015-03-08T15:21:05.407

2

You should remove the whitespace between the li elements. As example jsFiddle

<ul>
    <li><a href="#"><span>Home</span></a></li><li>
    <a href="#"><span>Work</span></a></li><li>
    <a href="#"><span>Information</span></a></li>
</ul>

edited Mar 08 '15 at 15:21

answered Mar 08 '15 at 15:11

marsh

1,361
1
12
19

weird that it is necessary to do that never seen that before. – KP83 Mar 08 '15 at 15:43

score 2 · Answer 2 · answered Mar 08 '15 at 15:30

You can set font-size: 0 to ul element and on li the one you want. For example:

/************************************************
Site Name: 
Author: 
************************************************/

html {
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
}
body {
  font-family: regular, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: #111;
}
body,
input,
textarea,
select,
button {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:hover {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
b,
strong {
  font-weight: normal;
}
a,
a:visited {
  color: #111;
  text-decoration: underline;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
h1,
nav {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 2px;
  background-color: transparent;
}
h1 {
  margin: 0 0 26px 0;
}
p {
  margin: 0 0 16px 0;
  background-color: transparent;
}
p a:hover,
a:focus,
a:active {
  color: #111;
  text-decoration: none;
}
h1 a,
a:visited {
  color: #111;
  text-decoration: none;
}
h1 a:hover,
a:focus,
a:active {
  color: #111;
  text-decoration: underline;
}
.center {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: green;
}
/************************************************
Header - Footer - Navigation
************************************************/

header {
  position: fixed;
  width: 100%;
  line-height: 55px;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.70);
}
/* Navigation */

nav {
  display: block;
  text-align: center;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 0;
  /*set font size 0*/
}
nav li {
  display: inline-block;
  padding: 0 0;
  font-size: 16px;
}
nav a {
  position: relative;
  display: block;
  color: white;
  text-decoration: none;
  background-color: red;
}
nav a:visited,
a:active {
  color: white;
  text-decoration: none;
}
nav a:hover span {
  transition: none;
  text-decoration: none;
  border-bottom: 2px solid white;
}
/* Dropdown */

/*nav li:hover a {
    background-color: #444;
}

nav li ul {
    position: absolute;
    float: left;
    z-index: 1;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

nav li:hover ul {
    opacity: 1;
    visibility: visible;
}

nav li ul li {
    float: none;
    width: 100%;
}

nav li ul a:hover {
    color: #999;
}*/

<header>
  <nav>
    <ul>
      <li><a href="#"><span>Home</span></a>
      </li>
      <li><a href="#"><span>Work</span></a>
      </li>
      <li><a href="#"><span>Information</span></a>
      </li>
    </ul>
  </nav>
</header>

<div class="center"></div>

You can also set a border to li elements to seperate from each other.

score 1 · Answer 3 · answered Mar 08 '15 at 15:50

1

Another way is to use the comment tags between the lines.

<ul>
    <li><a href="#"><span>Home</span></a></li><!--
    --><li><a href="#"><span>Work</span></a></li><!--
    --><li><a href="#"><span>Information</span></a></li>
</ul>

answered Mar 08 '15 at 15:50

Hans Meiser

97
7

Center nav list and remove default spacing?

3 Answers3