ゼロから創るWEBサイト#004 ナビゲーションを横並びにする
ナビゲーションを横並びにする
特にHTMLでは記述はしない。
liに対してCSSで設定する。
display: inline;
インラインボックスに変えることで、横並びになる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>WEB STUDY / TOP</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header>
<nav>
<ul class="nav">
<li>
<a href="#">TOP</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
</ul>
</nav>
</header>
<!-- /ヘッダー -->
<!-- メイン -->
<section>
</section>
<!-- /メイン -->
<!-- フッター -->
<footer>All content copyright WEB SUTUDY 2022 ©</footer>
<!-- /フッター -->
</body>
</html>
@charset "UTF-8";
/** {
outline: 1px dotted #000;
}*/
.nav {
list-style-type: none;
}
.nav li {
display: inline;
}
この記事が気に入ったらサポートをしてみませんか?