dlタグ内のdt,ddを一列で表示して表示する

dlでシンプルな表を作ろうとした時に、dtタグとddタグが縦並びになってしまい、表のようになってくれない。dlタグ自体、もともとtableタグと違って元々表を作成する用途のタグではないので仕方ない。

CSSで体裁を整えるしかない。

考え方としては下記になる。

1.親要素であるdlタグの横幅を指定する

2.dlタグの子要素を横並びにする

3.dlタグで折り返しを有効にする

4.dtタグ、ddタグの横幅をそれぞれ指定する

dl{
   width:300px;
   display:flex;
   flex-wrap:wrap;
}
dt{
   width:50%;
}
dd{
   width:50%;
}

注意点としては下記

・dtタグとddタグがずれて、dlタグを上回るとddタグが折り返してしまい、縦並びになる

・dtタグの横幅+ddタグの横幅+下段のdtタグの横幅<dlタグの横幅だと、下段のdtタグが繰り上がってしまう