リストを横並びにした際に簡単に均等にすることができる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についてでした。