ナビゲーションが壊れたので直したい。

Question

index.htmlファイルです。

<nav> <ul> <li id="nav1"><a href="fantasy.html">ファンタジー</a></li><!-- --><li id="nav2"><a href="mystery.html">ミステリー</a></li><!-- --><li id="nav3"><a href="lovestory.html">ラブストーリー</a></li><!-- --><li id="nav4"><a href="horrer.html">ホラー</a></li> </ul> </nav>

style.cssファイルです。

nav {
background-color:lightblue;
}

nav li{
border-right:1px solid #ffffff;
display:inline-block;
width:25%;
text-align:center;
line-height:2;
}

nav li:last-child {border-right:none;}

nav a:link,
nav a:visited {
background-color:#333333;
color:#ffffff;
text-decoration:none;
display:block;
}
nav a:hover {
background-color:#ff8800;
}

スクールの教材をやっています。
ファンタジー　ミステリー　ラブストーリー　ホラー
を横に並べてボタンを作ってクリックしたときに色が変わるようになっていたのですが
私がいつの間にかどこかのボタンを押したのか
ファンタジー　ミステリー　ラブストーリー
ホラー
という感じで
ファンタジーの下にホラーが来ています。

４つ横に並べたい。
間違えているところはありますか？

MAC OS X 10.8.5
確認したブラウザはグーグルクロム
クロムのバージョンはバージョン 49.0.2623.112 (64-bit)

コードとなっているところに貼付けているんですが
なっていなかたですか。。すみません。
ちゃんと横に並びました。
ありがとうございます。
ここに入力すれば皆さんに見てもらえるんですよね？

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください

Answer 1

要素を横並びにする際はflexの使用をオススメします。

要素の幅とボーダーの幅が別々に計算されていますので
box-sizing: border-box;
で、ボーダーを含めた長さに変更します。

nav ul {
	display: flex; // ←追加
}
nav li{
	border-right:1px solid #ffffff;
	display:inline-block;
	width:25%;
	text-align:center;
	line-height:2;
	box-sizing: border-box; // ←追加
}

<nav>
	<ul>
		<li id="nav1"><a href="fantasy.html">ファンタジー</a></li>
		<li id="nav2"><a href="mystery.html">ミステリー</a></li>
		<li id="nav3"><a href="lovestory.html">ラブストーリー</a></li>
		<li id="nav4"><a href="horrer.html">ホラー</a></li>
	</ul>
</nav>

CodePenで確認する

flexについて

Answer 2

よっ

princess_usagiのコードを見ると、
25% + 1px borderになってしまいます。

borderに関わらずリンクの幅を設定したかったら、下記のcssを追加してください。
よく使われているcssのフレームワーク (例 : bootstrap)は使っています。

* {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}

princess_usagiのコードで試しました。下記のリンクご覧ください。

http://study.jeromedupuis.net/teratail/137531/

:)