HTMLのヘッダーに文字ががぶってしまう。

HTMLにてheaderタグの下にdivタグを使用して文字を配置するとheaderの左右の真ん中に配置されてしまいます。

padding-topを設定してもdivタグ内にある文字がheaderの下に配置されません。

下記の「意外と知らない？」の部分がheader内の左右に配置した文字の中央に来てしまいます。

どこを直せばいいか教えていただけますでしょうか？

HTML
1　    <header>
2      <ul class=one>
3        <li>ようこそゲストさま</li>
4        <li><オンラインストア＞/li>
5      </ul>
6      <ul class=two>
7        <li>カート</li>
8        <li>ショッピングガイド</li>
9        <li>新規会員登録</li>
10        <li>ログイン</li>
11      </ul>
12    </header>
13
14    
15    <div class=top>  
16      <h3>意外と知らない？<br>〇〇の世界</h3>
17      
18      <p>Q＆A</p>
19    </div>

css
1
2header li {
3  list-style: none;
4}
5
6.one {
7  width: 300px;
8  padding: 0;
9  margin: 0;
10  float: left;
11  font-size: 5px;
12}
13
14.two {
15  float: right;
16  padding: 0;
17  margin: 0;
18  font-size: 5px;
19}
20
21.two li {
22  float: right;
23  padding: 5px;
24}
25
26.top h3 {
27  margin-top: 50px;
28}

x_x

2020/03/05 04:47

コード中に padding-top はないし、ほかにもいろいろと差異があるようです。提示コードがあっているか確認してください。

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

回答2件

一回、CSSなしで保存しブラウザから確認してみましょう。
この場合の最小構成は以下のスクショのようになります。

HTML
1<!DOCTYPE html>
2<meta charset=UTF-8 />
3<header>
4  <ul class=one>
5    <li>ようこそゲストさま</li>
6    <li><オンラインストア＞/li>
7    </ul>
8    <ul class=two>
9      <li>カート</li>
10      <li>ショッピングガイド</li>
11      <li>新規会員登録</li>
12      <li>ログイン</li>
13    </ul>
14  </header>
15
16
17  <div class=top>
18    <h3>意外と知らない？<br>〇〇の世界</h3>
19
20    <p>Q＆A</p>
21  </div>
22

**この時点で少々違和感を覚えませんか？**添付したエディタでは自動インデント補完を行っていますがとあるところからずれてしまっています。

これをブラウザで見てみると以下のようになります。

なぜか余分な/li>が出てきてしまっていますね。

個々の周辺のコードを一番最初に添付した画像で見てみましょう。

6行目の部分からインデント補完がくるっていませんか？
これは、本文中で<を使っている影響です。
本来なら<li>ここに</li>本文を入れなければいけないところを誤って< ここに /li>入れてしまっています。ここを修正してみると。

HTML
1<!DOCTYPE html>
2<meta charset=UTF-8 />
3<header>
4  <ul class=one>
5    <li>ようこそゲストさま</li>
6    <li>オンラインストア＞</li>
7  </ul>
8  <ul class=two>
9    <li>カート</li>
10    <li>ショッピングガイド</li>
11    <li>新規会員登録</li>
12    <li>ログイン</li>
13  </ul>
14</header>
15
16
17<div class=top>
18  <h3>意外と知らない？<br>〇〇の世界</h3>
19
20  <p>Q＆A</p>
21</div>
22

エディタの自動保管もうまくいっていてブラウザの表示も以下のように余分なものが表示されなくなったかと思います。

最後にCSSを当ててあげればお望み通りの表示になると思います。

HTML
1<!DOCTYPE html>
2<meta charset=UTF-8 />
3<style>
4header li {
5  list-style: none;
6}
7
8.one {
9  width: 300px;
10  padding: 0;
11  margin: 0;
12  float: left;
13  font-size: 5px;
14}
15
16.two {
17  float: right;
18  padding: 0;
19  margin: 0;
20  font-size: 5px;
21}
22
23.two li {
24  float: right;
25  padding: 5px;
26}
27
28.top h3 {
29  margin-top: 50px;
30}
31</style>
32<header>
33  <ul class=one>
34    <li>ようこそゲストさま</li>
35    <li>オンラインストア＞</li>
36  </ul>
37  <ul class=two>
38    <li>カート</li>
39    <li>ショッピングガイド</li>
40    <li>新規会員登録</li>
41    <li>ログイン</li>
42  </ul>
43</header>
44
45
46<div class=top>
47  <h3>意外と知らない？<br>〇〇の世界</h3>
48
49  <p>Q＆A</p>
50</div>
51

投稿2020/03/05 06:24

編集2020/03/05 06:27

kyoya0819

総合スコア10429

hokusai90

2020/03/06 04:29

わかりやすい説明ありがとうございました。1個解決しました。書き方が悪かったのですが、更に、「意外と知らない？〇〇な世界」の部分を「ようこそゲスト様」の真下から始めたいのですが・・・。ヘッダーを左右に配置後左右の真ん中は空白にしてヘッダーの下から書き出したい場合はブロック要素にすればいいのではないのでしょうか？なぜ、ヘッダーの真ん中に入り込んでくるかが解決できません・・・。

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