ゼロから創るWEBサイト#008 リストの幅「謎の空白」問題

WEB学習の記録

2022年9月21日 18:19

前回のリスト幅がうまく均等に設定できなかった問題。

ここを無視して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の部分はもう一度見直しが必要。
また明日確認してみよう。

いかにも解決できたように書いているが、昨日の問題をしれっと置き換えている。謎の空白ではなく、幅が伸びてしまうという現象だった…またこれも調べてみよう。とりあえず、サイトを作っていくことを進めることを優先という逃げ。

この記事が気に入ったらサポートをしてみませんか？