ulタグの display を flex に設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【CSS】メニューを横並びに配置する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</body>
</html>
style.css
@charset "utf-8";
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav li {
width: 200px;
text-align: center;
}
nav li a {
text-decoration: none;
}
今回の場合、各項目の幅が200pxのメニューが画面中央寄せで横並びに配置される。
