HTMLにて文字が重なって表記されてしまいます。

HTMLのヘッダー部分に文字が重なってしまします。
<header-logo>と<header-list>を横並びにしました。

<section>内にある<li>を書いたところ、次回予告、周辺案内、のすぐ右に表記されてしまいます。右ではなく、改行してすぐ下に表記をもってきたいです。

section内のul要素はブロック要素なので縦に並んでいくのでなないのですか？

検証ツールで要素の範囲を見てもよくわからず解決しません。
どなたか教えていただけますでしょうか？

HTML
1<body>
2  <div class="header">
3    <div class="header-logo">
4      <h1>美術館</h1>
5      <h3>ota memorial museum of art</h3>
6    </div> 
7    <div class="header-list">
8      <ul>
9        <li><a href="http://www.ukiyoe-ota-muse.jp/">HOME</a></li>
10        <li>次回予告</li>
11        <li>周辺案内</li>
12        <li>その他</li>
13      </ul>
14    </div> 
15  </div>
16  <section>
17    <ul>
18      <li>展覧会</li>
19      <li>講座・催し</li>
20      <li>ご利用案内</li>
21      <li>アクセス</li>
22      <li>コレクション</li>
23      <li>刊行物</li>   
24      <li>研究助成金</li>
25      <li>美術館概要</li>
26    </ul>
27  </section>
28
29</body>

CSS
1.header {
2  padding-left: 20px;
3  padding-right: 20px;
4  float: left;
5}
6
7.header-logo {
8  float: left;
9}
10
11.header-list {
12  float: left;
13}
14.header-logo h1 {
15  font-size: 20px;
16  width: 155px;
17  border-bottom: 2px solid gray;
18  padding-bottom: 2px;
19  margin-bottom: 0;
20}
21
22.header-logo h3 {
23  font-size: 10px;
24  margin-top: 0;
25}
26
27.header-list li {
28  float: left;
29  list-style: none;
30  margin: 10px;
31  border: 1px solid black;
32}

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

回答2件

ベストアンサー

[1] .headerのfloat: left;が不要です。

CSS
1.header {
2  padding-left: 20px;
3  padding-right: 20px;
4  /* float: left; */
5}

[2] H40831さんのおっしゃる通り、clear: both;により「回り込み解除」の必要があります。

「clearfix」でGoogle 検索してみてください。
float: left;などを指定した要素の親要素に「clearfix」を指定すると、回り込み解除をしてくれる便利な仕組みです。

HTML
1<body>
2  <div class="header clearfix"><!-- clearfixクラスを追加 -->
3    <div class="header-logo">
4      ...
5    </div> 
6    <div class="header-list">
7      <ul class="clearfix"><!-- clearfixクラスを追加 -->
8        ...
9      </ul>
10    </div> 
11  </div>
12  <section>
13    ...
14  </section>
15</body>

CSS
1/* 以下を追加 */
2.clearfix::after {
3  content: "";
4  display: block;
5  clear: both;
6}
7

投稿2020/03/07 23:50

編集2020/03/07 23:53

new1ro

総合スコア4528

float は、後続の要素をすべて回り込ませるというプロパティなので、
これ以降回り込ませたくないという箇所を決めるために clear を指定する必要があります。

https://itsakura.com/css-float-clear

float を学ぶシーンであれば必然的に説明されることなので、
一度学習方法を見直してみることをオススメします。

投稿2020/03/07 10:43

H40831

総合スコア975

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTMLにて文字が重なって表記されてしまいます。

関連した質問