これらの横と中央のナビゲーションタブの間のギャップを削除するにはどうすればよいですか？

Question

私のコードはここにあります： https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM

私が直面してる問題は私のナビゲーションタブの間現れて、いくつかのスペースがあるということです、と私は「表示：インライン」を使用する前に、私はこの問題を持っていませんでした私のナビゲーションを中心にする機能。何ができますか？私は "負のピクセルマージン"を使用しようとしましたが、まったく動作していないようです（私が実験していた別のサンプルナビゲーションで動作しました）。

Here's a screenshot of the output of the code.

Answer 1

[OK]をので、私は、ファイルをダウンロードし、私のサーバー上でそれをテストし、どのような私が見つけたことは、むしろ奇妙だったが、コードは別の行にあったときのスペースしかなかった、私は置くことによって、それを固定してしまいましたすべての<li>要素を1行に置き換えます。あなたはここにコードを見ることができます：https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224

Answer 2

マージン= 0を設定しようとします。 chromeでコードを実行している場合は、独自のパディングと余白を約8px追加します。だからそれを修正しようとする。

Answer 3

あなたが試してみました：

ul li{ margin-left:-6px; }

が、それはあなたを助け願っています。

Answer 4

このバグは、display：inline-blockを使用しているためです。

インラインブロックでは、htmlに要素間にブレークラインがある場合、スペースが表示されます。それを削除するには トリッキーなCSSの事があります：

ul { 
    font-size: 0; 
} 
li { 
    font-size: 12px; 
} 

フォントサイズ0で親を設定した場合、スペースが消えます。