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でborderにグラデーションをかけたようにする

    CSS

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

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

  2. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  3. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  4. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  5. CSS

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

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

  6. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

コメント

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

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

最近の記事

  1. スターバックス ハウスブレンド
  2. Anker PowerHouse 100
  3. ミニミニ温度計(シルバー)

アーカイブ

PAGE TOP