リスト書きます。

    <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


コメントを残す

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)