ヘッダーの位置についてです。

headerを定義したのですが、その中に入れるリストがmainの中に入ってしまいます。
header内にリストに入れる方法をご教授頂けないでしょうか。

下記にコードを記載します。

【HTML】

<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>インターネットサイト一覧</title> <link rel="stylesheet" href= "CSS/style.css"> </head> <body> <div class = "header"> <div class = "header-logo">インターネットサイト一覧</div> <div class = "header-list"> <ul> <li><a href = "https://global.toyota/jp/company/profile/overview/">会社概要</a></li> </ul> </div> </div>

	<div class="main">
		<div class="main-logo">ネットサーフィンにお使いください</div>
	</div>

<h2>各社をに下記に記載します。</h2> <a href = "https://www.yahoo.co.jp/">Yahoo!</a> <p></p> <a href = "https://www.google.co.jp/">Google</a> </body> </html>

【CSS】
h1{
color:blue;
}
h2{
color:red;
}
.header-logo{
background-color:green;
font-size:36px;
height:90px;
}
.header-list {
float:right;
list-style:none;
}
.main-logo{
background-color:blue;
height:100px;
font-size:25px;

}

以上、宜しくお願いします。

KojiDoi

2019/12/02 10:55

質問の意味が理解できません。すでに「header内にリストが入っている」状態が実現できているように見えますが？

行動規範の内容に同意します

回答2件

ベストアンサー

回答の前に。
実際に実行して、ようやく状況が理解できました。
実行しないと状況がわからないというのは、質問内容が悪すぎます。

回答ですが、本来は CSS をいじるべきですが、それだと作業依頼に近くなってします。
なので、HTML の方をいじることによる対症療法のみ提示します。

<div class="header-logo"> と <div class="header-list"> を、次のように入れ替えてください。
これで、header の中に 会社概要 が入るような見た目になると思います。

html
1<div class="header">
2	<div class="header-list">
3		<ul>
4			<li><a href="https://global.toyota/jp/company/profile/overview/">会社概要</a></li>
5		</ul>
6	</div>
7	<div class="header-logo">インターネットサイト一覧</div>
8</div>