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

実行結果

aタグのdisplay属性にblockを指定(ブロック要素扱い)
display:block
display:block
aタグにdisplay属性を指定しない場合(インライン要素扱い)
display:inline
display:inline

ソース

<style type="text/css">
    .ablock, .noblock {
        width:400px; margin:1em 0; border-collapse:collapse;
    }
    .ablock td, .noblock td {
        padding:2px; border:1px solid silver;
    }
    .ablock a {
        display:block; /* ブロック要素扱い */
    }
    .ablock a, .noblock a { /* 通常時 */
        margin:1px 0; padding:2px; background-color:#ffffcc; color:orange;
    }
    .ablock a:hover, .noblock a:hover { /* マウスが乗った時 */
        background-color:orange; color:#fff;
    }
</style>

<table class="ablock">
    <caption>aタグのdisplay属性にblockを指定(ブロック要素扱い)</caption>
    <tr><td><a href="#">display:block</a></td></tr>
    <tr><td><a href="#">display:block</a></td></tr>
</table>

<table class="noblock">
    <caption>aタグにdisplay属性を指定しない場合(インライン要素扱い)</caption>
    <tr><td><a href="#">display:inline</a></td></tr>
    <tr><td><a href="#">display:inline</a></td></tr>
</table>

polarized women