CSS

リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる

リストを横並びにした際にli要素の幅を簡単に均等にすることができるdisplay:table-cellを使ってみました。毎回width指定をして調整するのが面倒だなと思っていたんですが、これを使えばとても簡単に均等にできますね。可変にも対応できるのでレスポンシブといった今後使う機会が増えてきそうな感じです。

[ads_center]

使い方

ulでナビゲーションを作る場合は、ulにはdisplay:table、liにはdisplay:table-cellを指定します。

HTML

<nav class="global-navi">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Sitemap</a></li>
    </ul>
</nav>

CSS

nav.global-navi ul {
    background: #eee;
    border: 1px solid #ccc;
    font-size: 14px;
    text-align: center;
    width: 100%;
    display: table;
    table-layout: fixed;
}

nav.global-navi ul li {
    border-right: 1px solid #ccc;
    display: table-cell;
}

nav.global-navi ul li:last-child {
    border-right: none;
}

nav.global-navi ul li a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 0;
    display: block;
}

nav.global-navi ul li a:hover {
    background: #e9e9e9;
}

ulにはwidth:100%も指定しておきます。

あと、ulにtable-layout:fixedを指定しているんですが、これを指定しないとセル内の文字の長さに合わせた横幅が割り当てられます。指定することで、均等の幅にすることができます。

指定した方が見栄え的にもいいかなと思ったりもします。というわけで、display:table-cellについてでした。

Chromeのダウンロード履歴を自動で消去してくれる拡張機能「Always Clear Downloads」前のページ

リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Splitter」次のページ

関連記事

  1. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  2. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  3. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  4. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  5. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  6. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP