ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお（^ω^ = ^ω^）

2016-09-16

<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: テスト

？

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

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