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についてでした。

関連記事

  1. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  2. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

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

    CSS

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

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

  4. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  5. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  6. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP