HTML/CSSにおいて、『『dl』要素において『dt』『dd』を横並びにする方法』を紹介します。
こんな人にオススメ
- HTML/CSSで『dl』要素において『dt』『dd』を横並びに配置したい
目次
何も指定しなかった場合
何も指定せずに『dt』『dd』を記載します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
当然ですが縦方向に並びます。
- 何も指定しておらず横並びできていません
解決方法
では解決方法を紹介します。
OKパターン①：dl要素に『display: flex』『flex-wrap: wrap』、dt,ddに『width: ●％』を指定する
dl要素に『display: flex』『flex-wrap: wrap』を指定した上で、dt,ddに『width: ●％』を指定します。
この時dt,ddの合計が100％になるようにします。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
OKパターン②：dtに『float: left』、ddに『margin-left: ●px』を指定する
dtに『float: left』を指定した上で、ddに『margin-left: ●px』を指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 横並びでの配置ができています
イメージ通り横並び配置ができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『『dl』要素において『dt』『dd』を横並びにする方法』を紹介させていただきました。
まとめ
- dl要素に『display: flex』『flex-wrap: wrap』、dt,ddに『width: ●％』を指定する
- dtに『float: left』、ddに『margin-left: ●px』を指定する
皆さまの参考になれば幸いです。
コメント