質問: 横に5つの要素を並べたい(ナビメニュー、レスポンシブデザイン) 下のように入力したのですが、どうしても、aのborder-rightを入力すると、 aの最後の要素1つが下にいってしまいます。(幅がないので当然ですが。。。) どうすれば上手く並べることができるでしょうか? ``` 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; } ```
回答: a要素に`box-sizing: border-box;`を追加すればいけると思います。 【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】 【box-sizing - CSS | MDN】 横並びの方法はいろいろあるので最適な物を選んでみてください。 【よこ並びのCSS。】