PHP & JavaScript Room :: 設置サンプル

実行結果

項目A
項目Aの内容
項目B
項目Bの内容
項目C
項目Cの内容
項目A
項目Aの内容
項目B
項目Bの内容
項目C
項目Cの内容

ソース

<style>
    dl { margin:0 0 10px 0; padding:10px; border:1px solid #ccc; }
    dt { margin:0 0 10px 0; padding:0; }
    dd { margin:0 0 0 1em; padding:0; }
</style>
<dl>
    <dt>項目A</dt>
        <dd>項目Aの内容</dd>
    <dt>項目B</dt>
        <dd>項目Bの内容</dd>
    <dt>項目C</dt>
        <dd>項目Cの内容</dd>
</dl>

<style type="text/css">
    /* CSSでコンパクト表示 */
    .compact { overflow:hidden; margin:0; padding:10px 10px 0 10px; }
    .compact dt { float:left; clear:left; width:4em; }
    .compact dd { clear:right; margin-left:4em; padding:0; }
</style>
<dl class="compact">
    <dt>項目A</dt>
        <dd>項目Aの内容</dd>
    <dt>項目B</dt>
        <dd>項目Bの内容</dd>
    <dt>項目C</dt>
        <dd>項目Cの内容</dd>
</dl>

polarized women