See the Pen used nav by nakanishi (@nakanishi) on CodePen.
HTMLの構造
navを用いて、その中にul要素を配置する。
li要素の点と余計な空白を消す
li { list-style: none; padding: 0; margin: 0; }
liを左に寄せて、隙間を調整する
li { text-align: center; float: left; border: solid 1px; padding: 0px 10px; margin-left: -1px; } list:first-child { margin-left: 0; }
aリンクを修正
a { text-decoration: none; color: black; }
補足
ボーダー1pxを追加すると、線が2本重なって2pxの線になってしまう。この場合は、全体をmargin: -1pxし、さらにfirst-childだけmargin: 0にすればよい。
各アイテム間の隙間はmarginではなくpaddingを使用する。