CSSだけで ul li の横並び区切り線をつける

2014年2月14日更新 view: 72 view

cssだけで横並びのリストをつくろう

メニュー1 - メニュー2

みたいな感じですね。 - で区切っています。

条件

最初の左と、最後の右には区切り線はつけない。

.kugiri {

    
    li {
        display: -moz-inline-box;
        display: inline-block;
        *display: inline;
        *zoom: 1;

        
        &:not(:last-child):after {
            content:"-";
            color:#999;
            padding:0 5px;
            font-size:11px;
        }
        
    }

}

で、bootstrap の場合は横並びにして

<ul class="nav nav-pills kugiri">
                        <li>大学法人 岐阜大学</li>
                        <li>岐阜市</li>
                    </ul>
スポンサードリンク

これで完成!

スポンサードリンク

関連記事

関連カテゴリ

コロ助

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

ピックアップ

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

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