よくあるヘッダーのナビを作る

Tweet

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を追加すると、線が２本重なって2pxの線になってしまう。この場合は、全体をmargin: -1pxし、さらにfirst-childだけmargin: 0にすればよい。

各アイテム間の隙間はmarginではなくpaddingを使用する。