ゼロから創るWEBサイト#008 リストの幅「謎の空白」問題
前回のリスト幅がうまく均等に設定できなかった問題。
ここを無視してflexでやってしまおうかなど考えたけど
なんだかそれでは逃げているような気がして再度調べてみる。
なんとCSSに問題があるのかとばかり思っていたら
HTMLの記述の仕方で解決するという情報を入手。
リストを改行して記述していたがそれを横並びにすると
謎の空白が消えるというもの。
実際試してみると、リストに25%の幅を設定したものがきちんと4等分された！！
少し拍子抜けしたけれど、とりあえず解決できたのでひと安心。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>WEB STUDY / TOP</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
<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>
<!-- /フッター -->
</div>
</body>
</html>@charset "UTF-8";
.wrapper {
max-width: 1600px;
margin: 0 auto;
}
.nav {
list-style-type: none;
}
.nav li {
display: inline;
width: 25%;
}
ul.nav {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul.nav li a {
display: inline-block;
width: 25%;
text-align: center;
}とりあえず表示はできたもののCSSの部分はもう一度見直しが必要。
また明日確認してみよう。
いかにも解決できたように書いているが、昨日の問題をしれっと置き換えている。謎の空白ではなく、幅が伸びてしまうという現象だった…またこれも調べてみよう。とりあえず、サイトを作っていくことを進めることを優先という逃げ。