css レスポンシブデザイン

Question

横に５つの要素を並べたい（ナビメニュー、レスポンシブデザイン）
下のように入力したのですが、どうしても、aのborder-rightを入力すると、
aの最後の要素１つが下にいってしまいます。(幅がないので当然ですが。。。)
どうすれば上手く並べることができるでしょうか？

nav {
  width: 100%;
}
nav ul {
   width: 80%;
  text-align: center;
  margin: auto;
}
  
nav ul li a{
  display: block;
    float: left;
  line-height: 50px;
    width: calc( 100% / 5 );
  border-right: 1px solid #999;
}

Answer 1

a要素にbox-sizing: border-box;を追加すればいけると思います。

【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
http://phiary.me/css3-box-sizing/

【box-sizing - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

---

横並びの方法はいろいろあるので最適な物を選んでみてください。

【よこ並びのCSS。】
http://lopan.jp/layout/

Answer 2

厳密に行くなら（？）floatとwidthをliに持ってくるのがいいと思います。
widthをつけるのはliの方がいいです。
a要素にwidth: calc( 100% / 5 );を当てると、liからの相対になるはずなので。
あと、ulには回り込み解除でoverflowかclearfixいれておきましょう。

nav {
	width: 100%;
}
nav ul {
	width: 80%;
	text-align: center;
	margin: auto;
	overflow: hidden;;
}
nav ul li{
	float: left;
	width: calc( 100% / 5 );
}
nav ul li a{
	display: block;
	line-height: 50px;
	border-right: 1px solid #999;
}

それかflexでもいいと思いますよ。

nav {
	width: 100%;
}
nav ul {
	width: 80%;
	text-align: center;
	margin: auto;
	display: flex;
}
nav ul li{
	width: calc( 100% / 5 );
}
nav ul li a{
	display: block;
	line-height: 50px;
	border-right: 1px solid #999;
}