グローバルメニューなどで横並びリストを使う時に、面倒な計算をせずに、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を編集することもなく、自動的に均等割になって表示されます。