2列のリンクリストで最後が1つの場合は幅100%にする

スマートフォンサイトでよくある2列のリンクリストで、最後が1つの場合は自動で幅100%にする方法が少し悩んだので実装方法をメモしておきます。

サンプルコード

まずは特に対応しない場合です。

HTML

<ul class="linklist">
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
</ul>

<ul class="linklist">
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
	<li class="linklist_item">
		<a href="">リンクリスト</a>
	</li>
</ul>

CSS

.linklist {
	margin-bottom: 50px;
	overflow: hidden;
	border-top: #cccccc 1px solid;
	border-left: #cccccc 1px solid;
}
.linklist_item {
	width: 50%;
	float: left;
}
.linklist_item a {
	display: block;
	padding: 10px;
	border-bottom: #cccccc 1px solid;
	border-right: #cccccc 1px solid;
}

リンクが偶数個の場合は問題ないですが、奇数個の場合に最後の1つが左寄りで右側が空いてしまいます。
特に対応しない場合のデモページ
　

:last-childと:nth-child(odd)を合わせて使用することで対応できました。

CSS

.linklist {
	margin-bottom: 50px;
	overflow: hidden;
	border-top: #cccccc 1px solid;
	border-left: #cccccc 1px solid;
}
.linklist_item {
	width: 50%;
	float: left;
}
.linklist_item:last-child:nth-child(odd) {
	width: 100%;
}
.linklist_item a {
	display: block;
	padding: 10px;
	border-bottom: #cccccc 1px solid;
	border-right: #cccccc 1px solid;
}

対応後のデモページ