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

    CSS

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

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

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

    CSS

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

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

  3. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  4. Media Queriesの@media
  5. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  6. CSS

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

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

コメント

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

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

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP