1行に横並びにした要素の幅を、個数に関係なく均等にする

display: table;で横並びにした要素を、個数に関係なく幅を均等にしてみます。

幅均等化対応前のサンプル

display: table-cell;を指定した要素に特に幅の指定をしなかった場合のサンプルです。

HTML

<div class="nav">
	<div class="nav-item"><a href="">cly7796.net</a></div>
	<div class="nav-item"><a href="">HTML・CSS</a></div>
	<div class="nav-item"><a href="">JavaScript</a></div>
	<div class="nav-item"><a href="">jQuery</a></div>
	<div class="nav-item"><a href="">AngularJS</a></div>
	<div class="nav-item"><a href="">PHP</a></div>
	<div class="nav-item"><a href="">CMS</a></div>
	<div class="nav-item"><a href="">SEO</a></div>
	<div class="nav-item"><a href="">スマートフォン</a></div>
	<div class="nav-item"><a href="">その他</a></div>
</div>
<div class="nav">
	<div class="nav-item"><a href="">cly7796.net</a></div>
	<div class="nav-item"><a href="">HTML・CSS</a></div>
	<div class="nav-item"><a href="">JavaScript</a></div>
	<div class="nav-item"><a href="">PHP</a></div>
	<div class="nav-item"><a href="">CMS</a></div>
	<div class="nav-item"><a href="">SEO</a></div>
	<div class="nav-item"><a href="">スマートフォン</a></div>
</div>

CSS

.nav {
	display: table;
	width: 100%;
	margin-bottom: 10px;
}
.nav-item {
	display: table-cell;
	border-right: #666666 1px solid;
	background: #333333;
}
.nav-item a {
	display: block;
	padding: 10px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
}

幅均等化対応前のデモページ
この場合、display: table-cell;を指定した要素の内容量によって、各要素の幅が自動で決まります。
　

幅均等化対応後のサンプル

display: table;を指定している要素にtable-layout: fixed;を指定することで、子要素の幅を均等化できます。

CSS

.nav {
	display: table;
	width: 100%;
	margin-bottom: 10px;

	/* 子要素の幅の均等化 */
	table-layout: fixed;
}

幅均等化対応後のデモページ