Q&A
解説サイトに間違いがあるだけなのでは？
上の画像ではトピックが２つ横並びになっているように見えますが、違うのですか？
webサイト制作でnewsランを作成しています。
dl dt ddを使った記述で作成したのですが、news欄が縦に並んでしまい、横並びになりません。
解説サイト等を見ても、下記のHTML通りに記述すれば横並びになるはずなのですが、なぜ縦になってしまうのでしょうか？
文字を横並びにするために、
dlに
display: inline-block;の記述を施してみましたがうまくいきませんでした。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ブランドサイト</title> 6 <link href="css/style.css" rel="stylesheet"> 7 </head> 8 9 <body> 10 <header> 11 <div class=""></div> 12 <ul> 13 <li class="lo">Home</li> 14 <li class="lo">About</li> 15 <li class="lo">Product</li> 16 <li class="lo">Online Store</li> 17 <li class="lo">NEWS</li> 18 </ul> 19 </header> 20 <div class="container"> 21 <div class="main"> 22 23 </div> 24 <div class="consept"> 25 <h1>おいしさ際立てる、美しさ</h1> 26 <p>○○県○○市、この地域に構える○○店。 27 様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。 28 29 </p> 30 </div> 31 <div class="About"> 32 <h3>About</h3> 33 34 <img src="plate-526603_1920.jpg"> 35 </div> 36 <div class="purodakut"> 37 <h3>Product</h3> 38 39 <img src="niz0025-066.jpg"> 40 <p>kakakakaka</p> 41 42 </div> 43 <div class="purodakut2"> 44 <img src="gettyimages-141223489-612x612.jpg"> 45 </div> 46 47 <div class="purodakut3"> 48 <img src="plate-629970__340.jpg"> 49 </div> 50 51 <div class="Online"> 52 <h3> Online Store</h3> 53 <img src="istockphoto-526920325-170667a.jpg"> 54 </div> 55 <div class="news"> 56 <h3>NEWS</h3> 57 <dl> 58 <dt>○○年○月○日</dt> 59 <dd>新商品がリリースされました。</dd> 60 61 <dt>○○年○月○日</dt> 62 <dd>ブランド展示会を開催します。</dd> 63 </dl> 64 65 </div> 66 <footer></footer> 67 </div> 68 </body> 69</html> 70
CSS
1body{ 2 margin: 0; 3 padding: 0; 4} 5 6header{ 7 position: fixed; 8 width: 100%; 9 height: 100px; 10 background-color: rgb(235, 241, 241); 11} 12 13ul{ 14 text-align:right; 15 padding-right:500px; 16 padding-top:20px; 17 18} 19 20li{ 21 display: inline; 22} 23 24.lo{ 25 padding:0px; 26 margin-right: 30px; 27} 28 29li:hover{ 30 opacity: 0.5; 31} 32 33li{cursor: pointer} 34 35.main{ 36 height: 80vh; 37 background-size:cover; 38 background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg); 39} 40 41.consept{ 42text-align: center; 43} 44 45.About{ 46 background-color:rgb(243, 240, 235); 47 height: 500px; 48} 49 50.About h3{ 51 display: inline-block; 52 margin-top: 70px; 53} 54 55.About img{ 56 width: 70%; 57 float: right; 58 height: 100%; 59} 60 61.purodakut{ 62 height: 100%; 63 background-color:rgb(243, 240, 235); 64} 65 66 67.purodakut h3{ 68text-align: center; 69} 70 71.purodakut p{ 72 text-align: right; 73 padding: 70px 200px; 74} 75 76 77.purodakut img{ 78 float:left; 79 width: 70%; 80 height: 600px; 81} 82 83.purodakut2{ 84 background-color:rgb(243, 240, 235); 85 86} 87 88.purodakut2 img{ 89 float: right; 90 width: 70%; 91 height: 600px; 92} 93 94.purodakut3{ 95 background-color:rgb(243, 240, 235); 96} 97 98.purodakut3 img{ 99 width: 70%; 100 height: 600px; 101} 102 103.Online{ 104 height: 500px; 105} 106 107.Online h3{ 108 display: inline-block; 109 margin-top: 70px; 110} 111 112.Online img{ 113 float: right; 114 width: 50%; 115 height: 500px; 116} 117 118.news{ 119text-align: center; 120}
上がdisplay: inline-block;を適応させた場合
横並びというのは
○○年○月○日 新商品がリリースされました。
○○年○月○日 ブランド展示会を開催します。
こういう感じでしょうか？
はい そのような形になります。
回答1件
0
ベストアンサー
他の方がもっといい回答を出してくれるかもしれませんが
お役に立てたなら幸いです。
html
1 <div class="news"> 2 <h3>NEWS</h3> 3 <dl> 4 <div class="contena"> 5 <dt>○○年○月○日</dt> 6 <dd>新商品がリリースされました。</dd> 7 </div> 8 <div class="contena"> 9 <dt>○○年○月○日</dt> 10 <dd>ブランド展示会を開催します。</dd> 11 </div> 12 </dl> 13 </div>
css
1dd, dt{ 2 display: inline-block 3} 4
投稿2021/07/02 05:56
総合スコア31
あなたの回答
tips
プレビュー
