list要素を横並びに、さらに均等に配置する

リスト書きます。

    <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>

css書きます。

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

ul li {
 display: table-cell;
}

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

親要素のulにdisplay: table;
子要素のliにdisplay: table-cell;
このままだと文字幅で割り付けられるので
ulに table-layout: fixed;を指定することによって完全な均等割付に。
ブログリニューアルする際にpx指定じゃ均等割付け無理だよな？
ということに気づき、ググった結果このやり方を知りました。

いままでずっとfloatで寄せてから微調整してたよ。これめっちゃ便利ですやん。
参考サイト様

リニューアル一発目は真面目ネタでしたw

Share on Facebook
Check

高さの問題

backgroundに常に背景画像を配しておきたいと思い
heightを100％にしていしていたんだけど
どうも不具合が。

フッターとヘッダーを固定してした場合、
常に（ブラウザーの高さ）-（ヘッダーの高さ+フッターの高さ）が
キープされるので、
スクロールすると背景画像がない部分が出てきたり。

ちょっとサイトのデザイン上若干ややこしい
設定をしているので起こった問題であって
そうホイホイ起こるようなことではないと思いますが
忘れないようにメモ。

完成したページはブラウザのサイズを変えて
スクロールしてもちゃんと表示されるかチェックしないと
いけないですね。

Share on Facebook
Check