dtとddで改行されるのを防ぎたい

【自分のもの】

【手本】

【悩んでいること】
目指している構図では、年数と同じ行に文章がきます。
しかし自分の作ったものでは、年数のその下の行に文章が来てしまいます。

～年　~~~~~~~~
みたいな感じにしたいのですが、

～年

のように、~~~~~~~の文章がそれぞれ年数の下に改行してしまいます。

dtが年数、ddが文章と、コードを書きましたが、それが原因で改行されてしまうのでしょうか。原因がわからないので、対処法を教えて頂きたいです。

```HTML
<section id="news" class="wrapper">
    <h2 class="sec-title">News</h2>
     <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>
    </section>
```

```CSS
#news dl {
  display: flex;
  border-top: solid 1px #c8c8c8;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#news dt {
  width: 20%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

#news dd {
    width: 80%;
    border-bottom: solid 1px #c8c8c8;
    padding: 15px;
}
```

行動規範の内容に同意します

回答2件

ベストアンサー

paddingとだけすると全方位に影響があるので

css
1  padding-top: 15px;
2  padding-bottom: 15px;

などと明示する必要があるでしょうし、
デフォルトで持っているmargin,paddingもあるのでクリアする必要がありそうです。

css
1dt, dd {
2	margin: 0;
3	padding: 0;
4}
5
6#news dl {
7	display: flex;
8	border-top: solid 1px #c8c8c8;
9	flex-wrap: wrap;
10	margin-bottom: 20px;
11}
12
13#news dt {
14	width: 20%;
15	border-bottom: solid 1px #c8c8c8;
16	padding-top: 15px;
17	padding-bottom: 15px;
18}
19
20#news dd {
21	width: 80%;
22	border-bottom: solid 1px #c8c8c8;
23	padding-top: 15px;
24	padding-bottom: 15px;
25}
26

投稿2021/02/23 11:53

m.ts10806

総合スコア80850

sun-chan

2021/02/28 05:01

paddingを、おっしゃる通りに左右の文を削除したところ、うまくいきました。もともと左右が含まれていた分、行が伸びてしまい、次の行に改行してしまったのかと思います。ありがとうございました。

行動規範の内容に同意します

様々な方法があるかと思いますので下記は一例です。

css
1#news dl {
2    /* display: flex; */
3    border-top: solid 1px #c8c8c8;
4    flex-wrap: wrap;
5    margin-bottom: 20px;
6  }
7  
8  #news dt {
9    float: left;
10    width: 20%;
11    border-bottom: solid 1px #c8c8c8;
12    padding: 15px;
13  }
14  
15  #news dd {
16      width: 80%;
17      border-bottom: solid 1px #c8c8c8;
18      padding: 15px;
19  }