お知らせごとに罫線を引きたいのですが、私の書いたコードだと、写真の下だけに線が入ります。
dlに線を引けば良いかと考えたのですが、dlだと文章の上に2本線が入るだけです。
以下が私の書いたコードです。
html
1コード<div class="news clearfix"> 2 <h2>NEWS お知らせ</h2> 3 <dl> 4 <dt><img src="image/#" width="89" alt=""></dt> 5 <dd><a href="#">お知らせ文</a></dd> 6 <dd class="day">2018年10月25日</dd> 7 </dl> 8 <dl> 9 <dt><img src="image/#" width="89" alt=""></dt> 10 <dd><a href="#">お知らせ文</a></dd> 11 <dd class="day">2018年5月18日</dd> 12 </dl> 13 <dl> 14 <dt><img src="image/#" width="89" alt=""></dt> 15 <dd><a href="#">お知らせ文</a></dd> 16 <dd class="day">2018年5月7日</dd> 17 </dl> 18 </div>
css
1コード 2.news { 3 4 margin-top: 80px; 5} 6 7.news h2 { 8 font-size: 24px; 9 color: #333; 10 font-weight: normal; 11 background-color: #f5f5f5; 12 border-top: solid 2px black; 13 height: 65px; 14 line-height: 3; 15 padding-left: 15px; 16 17} 18.day { 19 color: #d44950; 20 font-size: 14px; 21} 22.news a { 23 font-size: 14px; 24 color: #464646; 25 26} 27dl { 28 width: 1136px; 29 30 31 32 33} 34dt { 35 float: left; 36 width: 78px; 37 clear:left; 38 margin-bottom: 10px; 39 border-bottom: dotted 1px gray; 40 41 42} 43dd { 44 float: left; 45 width: 1000px; 46 47 48} 49a { 50 text-decoration: none; 51} 52a:hover { 53 text-decoration: underline; 54 55} 56
回答1件
あなたの回答
tips
プレビュー