twitterbootstrap dl dt dd タグ横並べ

2014年10月12日更新 view: 3395 view
photoBy: http://d3pr5r64n04s3o.cloudfront.net/tuts/231_twitter_bootstrap_101/boot2.png

横並べするには?

twitter bootstrap を用いて、
dlタグを横並べする方法。

<dl class="dl-horizontal">
    <dt>禁断の果実</dt>
    <dd>
        <ul>
            <li>みかん</li>
            <li>りんご</li>
        </ul>
    </dd>
</dl>

たったこれだけ。

スポンサードリンク

右寄せしたい

<div class="t-r">
    <dl class="dl-horizontal" style="float:right;">
        <dt>たいとる</dt>
        <dd style="margin-left:170px;">まんんじゅうや</dd>
    </dl>
    <div class="clearfix"></div>
</div>

float right を設定すればOK!

横幅を調整する

直接bootstrap.cssを触りたくないが dl dt dd には横幅が設定されている。
新しいCSSを作成して横幅を調整しよう。

.dl-horizontal.user dt {
    text-align: left;
    width:63px;
}

.dl-horizontal.user dd {
    margin-left:20px;
    padding-top:10px;
}

HTMLは

<dl class="dl-horizontal user">
    <dt><a href="#">画像とか</a></dt>
    <dd>
        hogeman
    </dd>
</dl>

これでうまく横幅を調整することができる。

dl dt dd の入れ子

上記のように dl dt dd を入れ子にする場合。

<style type="text/css">
    dl {
        margin:0;
        padding:0;    
    }
    dd > .dl-horizontal > dt {
        text-align:right;
        width:80%;
        padding-right:10px;    
    }
    dd > .dl-horizontal > dd {
        text-align:left;
    }
</style>

続いてソース。

<dl>
    <dt><a href="#">ラーメン食べたい。つけ麺食べたい。</a></dt>
    <dd>
        <dl class="dl-horizontal">
            <dt><img src="http://a0.twimg.com/profile_images/1930008669/koro_mini.png"></dt>
            <dd><a href="/">ひでまん</a> さん</dd>
        </dl>
    </dd>
</dl>

これだけ。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

7月25日 ( 火 ) にアクセスが多かった記事はこちら!