Display flexが効かないので、教えて下さい。

Question

どなたか下記について、
ご教授いただけますでしょうか？

=================
やりたいこと__イタリックテキスト__

ddとdtを横一列に並べたいのですが、
上手くできないです。
どこの部分を修正すればいいのか、
教えていただきたいです。

模写サイト・・・https://code-step.com/demo/html/portfolio1/

<dl>
       <dt>2020.XX.XX</dt>
       <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
      
       <dt>2020.XX.XX</dt>
       <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
       
       <dt>2019.XX.XX</dt>
       <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
       
       <dt>2019.XX.XX</dt>
       <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
      
       <dt>2019.XX.XX</dt>
       <dd>【個展開催のお知らせ】</dd>
      
    </dl>

#News dl {
    display: flex;
    flex-wrap: wrap;

     width: 100％;
    border-top: solid 1px #c8c8c8;
    border-bottom: solid 1px #c8c8c8;
 }

 #News dt {
  display: flex;

  align-items: center;
  justify-content: center;
  width: 40%;
  padding: 20px;
}


#News dd {
 float: right;
  width: 60%;
  paddding: 2opx;
}

Comments

[K_3578]

ソースコードはMarkdownのコードブロックで囲んで提示してください。
html、css毎に下記のように```で上下を囲みます

ソースコードの上下を

```html
ソースコード
```

```css
ソースコード
```

[MiraiJP]

ご丁寧にご指摘をありがとうございます！
初めて使ったので、知りませんでした・・！
勉強します！

[K_3578]

質問は編集できるので今からでも直しましょう。
https://teratail.com/questions/238564
上記リンクの質問も参考になると思います

[MiraiJP]

ありがとうございます！
修正致しました！

[K_3578]

修正感謝します。

Answer 1

とりあえず、dt, dd のブラウザデフォルトの余白のリセットと、サイズの計算法を変更したら横並びになります。

dt, dd {
  margin: 0;
  box-sizing: border-box;
}

Comments

[MiraiJP]

ありがとうございます！！

Answer 2

divでグループに分けたほうが良いと思います

<style>
dl div{
display:flex;
flex-wrap:wrap;
}
</style>
<dl>
<div>
<dt>2020.XX.XX</dt>
<dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
</div>
<div>
<dt>2020.XX.XX</dt>
<dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
</div>
<div>
<dt>2019.XX.XX</dt>
<dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div>
<dt>2019.XX.XX</dt>
<dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
</div>
<div>
<dt>2019.XX.XX</dt>
<dd>【個展開催のお知らせ】</dd>
</div>
<div>
</dl> 

Comments

[MiraiJP]

ありがとうございます！！