グローバルメニューなどで横並びリストを使う時に、面倒な計算をせずに、1つひとつの項目の横幅が自動的に均等割になるようなCSSのtipsを見つけました。
まずは親要素であるulを、テーブル要素として表示するために、次のように指定します。
display:table; /* テーブル要素として表示 */ table-layout:fixed; /* 横幅を固定 */ width:/* 任意の横幅 */;
次に子要素のliを、テーブルのセルとして表示させます。
display: table-cell;
これで、ul要素に指定した横幅を自動的に均等割にすることができます。
実際に作成中の新オリジナルテーマでは、次のようなスタイル(現時点で)を指定しました。
.menu { background: transparent; font-family: 'Roboto Condensed', Arial, sans-serif; margin-top: 30px; margin-bottom: 30px; font-size: 16px; font-weight: 300; list-style: none; overflow: hidden; padding: 0; display: table; table-layout: fixed; width: 60%; float: right; } .menu li { text-align: center; display: table-cell; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .menu li + li { border-left: none; }
表示はどうかというと…
メニュー項目の増減があっても、全体の幅は変わらず、CSSを編集することもなく、自動的に均等割になって表示されます。