Q&A
inline-blockが横並びになりません。
現在progateの学習を終え、試しに上級編の道場ページを開きながらローカル環境で模写コーディングを行なっています。
答えを見たら早いと思うのですが、なるべくコードを見ないようどこが間違がっているのかだけご教示いただきたいです。
横並びにならないのはlessonsに入っているlesson全てが縦並びのままになっています。
html側
html
1<!--lesson--> 2 <div class="lesson-wrapper"> 3 <div class="container"> 4 <h3>Learn Where to Get Started!</h3> 5 <div class="lessons"> 6 <div class="lesson"> 7 <div class="lesson-image"> 8 <img src="https://prog-8.com/images/html/advanced/html.png"> 9 <p>HTML & CSS</p> 10 </div> 11 <div class="lesson-comment"> 12 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 13 </div> 14 <div class="lesson"> 15 <div class="lesson-image"> 16 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 17 <p>jQuery</p> 18 </div> 19 <div class="lesson-comment"> 20 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 21 </div> 22 <div class="lesson"> 23 <div class="lesson-image"> 24 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 25 <p>Ruby</p> 26 </div> 27 <div class="lesson-comment"> 28 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 29 </div> 30 <div class="lesson"> 31 <div class="lesson-image"> 32 <img src="https://prog-8.com/images/html/advanced/php.png"> 33 <p>PHP</p> 34 </div> 35 <div class="lesson-comment"> 36 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div>
css
CSS
1.lesson-wrapper{ 2 height:700px; 3 background-color:#DCDCDC; 4 margin-top:200px; 5} 6.lesson-wrapper h3{ 7 text-align:center; 8 color:#808080; 9 font-size:24px; 10 font-weight:normal; 11 padding:50px 0; 12} 13.lessons{ 14 width:100%; 15 text-align:center; 16 background-color:#D73333; 17} 18.lesson{ 19 display:inline-block; 20 width:200px; 21 text-align:center; 22 background-color:#D7EEFF; 23} 24.lesson-image{ 25 26} 27.lesson-comment{ 28} 29
試したこと
子要素（横並びにしたいもの）がすべてinline-blockになっているか
子要素のwidthを設定しているか
子要素のwidthの合計値が親要素のwidthを超えていないか
親要素のwidthを設定しているか
そもそも前に記述したcssが影響していないか
上記は一通り確認したつもりなのですが、初心者なのでもしかしたら理解できていないだけかもしれません。。。
補足情報（FW/ツールのバージョンなど）
HTML5 & CSS3
回答1件
0
ベストアンサー
閉じてないタグがあったためかと思われます
html
1<!DOCTYPE html> 2<head> 3 <link rel="stylesheet" type="text/css" href="style.css"> 4</head> 5<body> 6 <div class="lesson-wrapper"> 7 <div class="container"> 8 <h3>Learn Where to Get Started!</h3> 9 <div class="lessons"> 10 <div class="lesson"> 11 <div class="lesson-image"> 12 <img src="https://prog-8.com/images/html/advanced/html.png"> 13 <p>HTML & CSS</p> 14 </div> 15 <div class="lesson-comment"> 16 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 17 </div> 18 <!-- 例：ここが閉じられていなかった 他もそうでした --> 19 </div> 20 <div class="lesson"> 21 <div class="lesson-image"> 22 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 23 <p>jQuery</p> 24 </div> 25 <div class="lesson-comment"> 26 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 27 </div> 28 </div> 29 <div class="lesson"> 30 <div class="lesson-image"> 31 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 32 <p>Ruby</p> 33 </div> 34 <div class="lesson-comment"> 35 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 36 </div> 37 </div> 38 <div class="lesson"> 39 <div class="lesson-image"> 40 <img src="https://prog-8.com/images/html/advanced/php.png"> 41 <p>PHP</p> 42 </div> 43 <div class="lesson-comment"> 44 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 </div> 51</body> 52</html>
追記：
インデントなども揃っていないために起こりやすいミスかと思います
投稿2019/09/23 07:48
編集2019/09/23 07:56
総合スコア133
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/23 07:54
2019/09/23 07:57
2019/09/23 08:00
2019/09/23 08:06