dtとddを横並びにする
--------html---------<dl>
<dt>りんご</dt>
<dd>赤い果物</dd>
<dt>ぶどう</dt>
<dd>紫の果物</dd>
<dt>めろん</dt>
<dd>緑の果物</dd>
</dl>--------cssで調整する---------
dt
{
float: left;
}
dt::after
{
content: "："
}
dtとddを1行で横並びにしたい場合はdtにのみ--float : left;--を適用させます。
ddにも適用させてしまうとdlリスト内のすべての項目が横並びになるので注意してください。
また、横並びになると文字が繋がって見えてしまうのでdtの擬似要素 -- after -- に -- ： -- という記号を挿入しています。