CSSで横並びメニューを均等割にする方法

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