サイトのスマホ対応を行っていますが、よくある対応で、dlを使ったリストがうまくレスポンシブにならないので、その対応方法をメモ
こんな感じに表示させたい
- 名目
- 説明
- スマホ
- androidのことを指す。iphoneが含まれる場合が多い
- パソコン
- PCのことを指す。macが含まれる場合が多い
HTML
<dl>
<dt>名目</dt>
<dd>説明</dd>
<dt>スマホ</dt>
<dd>androidのことを指す。iphoneが含まれる場合が多い</dd>
<dt>パソコン</dt>
<dd>PCのことを指す。macが含まれる場合が多い</dd>
</dl>
dt {
clear: left;
float: left;
width: 20%;
}
dd {
argin: 0 0 0 20%;
}