詳しい人求む！

cssの display: flex;で横並びにならずに困ってます

解決済

質問者：うるき
質問日時：2022/12/04 13:18
回答数：1件

htmlはこちら
<!DOCTYPE html>
<html lang="jn">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>しほ料理</title>
<link rel="stylesheet" href="siho.css">

</head>
<body>

<a href="index.html"><img src="shio.png" class="gazou"></a>
<span class="king">Shio-Cooking</span>
<header class="header">
<nav class="nav">
<ul>
<li>教室概要</li>
<li> 料金</li>
<li> 無料レシピ </li>
</ul>
</nav>
</header>
<h1>しほのオンライン料理教室へようこそ</h1>
</body>
</html>
cssはこちらから
body{
background-color: bisque;
}
.taitor{
font-size: 85px;

}
.king{
font-size: 85px;
background-color: black;
color: white;
float;left: ;
margin-top: 150px;
}
.gazou{
float:left;
margin-left: 10px;
}
h1{
clear:both;
}
.nav{
max-width: 1000px;
font-size: 30px;
color: red;
background-color: #ddd;
clear:both;
display: flex;
}
.header{

}
横ならびにならず困ってますご教授お願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2022/12/04 14:16

こんにちは

flexレイアウトはコンテナにdeispay:flexを指定して、子要素の並びを制御するというものです。
ご提示のHTMLの場合、ul要素がコンテナに当たりますので、ulの方に設定してください。

.nav ul{
display: flex;
justify-content: space-between;
}

のような感じです。
（.nav の方のflex指定を削除しておかないと、ulの幅が確保されません）