読者です 読者をやめる 読者になる 読者になる

webプログラマー こびとの雑記

初めまして、こびとです。web系制作中心に、趣味のwordpress、仕事、アフィリエイトについて書いています。ぜひ読者登録お願いします

ブログランキングに登録中です。ポチッとお願いします。^^
にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村

【レスポンシブ】CSSで、dt、ddを横並びで表示させる簡単な方法

サイトのスマホ対応を行っていますが、よくある対応で、dlを使ったリストがうまくレスポンシブにならないので、その対応方法をメモ

こんな感じに表示させたい

名目
説明
スマホ
androidのことを指す。iphoneが含まれる場合が多い
パソコン
PCのことを指す。macが含まれる場合が多い

HTML

<dl>
<dt>名目</dt>
<dd>説明</dd>
<dt>スマホ</dt>
<dd>androidのことを指す。iphoneが含まれる場合が多い</dd>
<dt>パソコン</dt>
<dd>PCのことを指す。macが含まれる場合が多い</dd>
</dl>

CSS

dt {
  clear: left;
  float: left;
  width: 20%;
}
dd { 
  argin: 0 0 0 20%;
}