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

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

<dt>と<dd>を横並びにする

html

スポンサードリンク

<dl class="cf">
    <dt>※1</dt>
    <dd>テスト</dd>
    <dt>※2</dt>
    <dd>テスト</dd>
</dl>

これを表示すると

※1
テスト
※2
テスト

こうなる。

んで、これに横並びするstyleをあてる

<style>
.inline dt {
    float: left;
}
.inline dd {
    margin-left: 10px;
}
</style>
<dl class="cf inline">
    <dt>※1</dt>
    <dd>テスト</dd>
    <dt>※2</dt>
    <dd>テスト</dd>
</dl>

そうするとこうなる。

※1
テスト
※2
テスト

ブログでは表示できないっぽい。どんなしてやるんだろう。

とりあえず上記コードを足せば横並びになるので、おk。