横並びではなく、下に表示をさせたいです
ProgateでHTML、CSSの課題を解いていますが、画像の通り「お問い合わせ」がSwiftの隣にきてしまいます。
横ではなく、HTML & CSSの下に表示させたいです。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <header> 11 <div class="title">Progate</div> 12 <ul> 13 <li>プログラミングとは</li> 14 <li>学べるレッスン</li> 15 <li>お問い合わせ</li> 16 </ul> 17 </header> 18 <div class="helloyoukoso"> 19 <h1>HELLO WORLD<span>.</span></h1> 20 <h2>プログラミングの世界へようこそ</h2> 21 </div> 22 <h3 class=lessontitle>学べるレッスン</h3> 23 <div class="lessons"> 24 <div class="lesson-logo"> 25 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" /> 26 <p>HTML & CSS</p> 27 </div> 28 <div class="lesson-logo"> 29 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" /> 30 <p>PHP</p> 31 </div> 32 <div class="lesson-logo"> 33 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" /> 34 <p>Ruby</p> 35 </div> 36 <div class="lesson-logo"> 37 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" /> 38 <p>Swift</p> 39 </div> 40 </div> 41 42 <div class=toiawase> 43 <h3>お問い合わせ</h3> 44 </div> 45 </body> 46</html>
CSS
1body { 2 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 3} 4 5li { 6 list-style: none; 7} 8 9/* ここからCSSを記述してください */ 10header { 11 background-color:#26d0c9; 12 color:white; 13 height:90px; 14} 15.title{ 16 float:left; 17 font-size:36px; 18 padding:40px 40px 20px 20px; 19} 20li { 21 float:left; 22 list-style:none; 23 padding:33px 20px; 24} 25.helloyoukoso{ 26 padding-top:100px; 27 padding-left:80px; 28 padding-right:80px; 29} 30.helloyoukoso h1{ 31 font-size:140px; 32} 33.helloyoukoso h2{ 34 font-size:60px; 35} 36.helloyoukoso span { 37 color:red; 38} 39.lessons { 40 padding-right:80px; 41 padding-left:80px; 42 padding-top:50px; 43} 44.lesson-logo { 45 float:left; 46 padding-right:40px; 47} 48.lesson-logo p { 49 padding-top:30px; 50 font-size:24px; 51 padding-bottom:100px; 52} 53.lessontitle{ 54 padding-top:100px; 55 padding-left:80px; 56 font-size:28px; 57 border-bottom:2px solid #dee7ec; 58 padding-bottom:15px; 59} 60.toiawase { 61 padding-left:80px; 62} 63.toiawase h3{ 64 font-size:28px; 65}
試したこと
①<h3>お問い合わせ</h3>をfloat:left
→Rubyの下あたりに移動した
②CSSのfloat:leftの箇所を消していく
→.lesson-logoクラスを消すとお問い合わせは横並びではなくなったが、.lesson-logoクラスが縦並びになってしまう。
補足情報(FW/ツールのバージョンなど)
progate
(クラス名が日本語になっていたり、重複箇所があったり気持ち悪いかもしれませんが、今回の質問に関わらなければ目をつむってください。)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/04 11:32
2020/10/04 23:17