[CSSメモ]定義リストdt,ddの横並び

この記事は約1分で読めます。

定義リストdl,dt,ddの使い方が難しい。。。や、難しくないのかもしれないけど、いつも躓く。

dtとddを横に並べた時、ddに長文が入って改行される場合。何もしないでただfloatすると、改行されたdd内の長文が、dtの下に回り込んでしまう。とても見た目が良くない。

.main dt {
    clear:left;
    float: left;
    width: 105px;
    display:block;
}
.main dd {
  margin-left:105px;
}

こんだけでいいのか!過去にも何度もやってるはずなのになんで覚えられないのかな。。。覚えるために、無駄に定義リスト使いまくってみよう。

こちらのサイト(”FLA-FLI“様)を参考にさせていただきました。

タイトルとURLをコピーしました