Search code examples
htmlcssnavjustify

Webkit bug (?) - navigation justify

I have a justified horizontal navigation, but webkit always has a little space at the right end. Do you know what's the problem?

Here is the code:

HTML

<nav class="navJustify">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
  <a href="#">Link5</a>
  <a href="#">Link6</a>
  <a href="#">Link7</a>
  <a href="#">Link8</a>
</nav>

CSS

nav.navJustify {
   text-align: justify;

   background-color: black;
}

nav.navJustify:after {
   content: '';
   display: inline-block;
   width: 100%;
}

nav.navJustify a {
   position: relative;
   display: inline-block;

   width: 12%;
   background-color: yellow;
}

I made a jsFiddle so you can see what I mean (in Chrome/Safari): jsFiddle.

Solution

  • It's due to the white space in your HTML from the inline-block elements which are sensitive to it. Change the end of it to:

    <a href="#">Link8</a></nav>

    or

    <a href="#">Link8</a><!--
--></nav>

    jsFiddle example 1

    jsFiddle example 2