しーぼーデザイン since 2003

blog ブログ

リストタグで横幅いっぱい(100%)を均等分割

2013.10.09

思い切り備忘録です。
横置きのナビゲーションバーを設置する際などでリストタグを使う場合に、端から端まで均等に分けたい。
そんな時は?

ulタグにdisplay:table、liタグにdisplay:table-cellを指定して上げます。
こんな感じ。

nav.sub ul{
	list-style-type: none;
	width: 100%;
	display: table;
	table-layout: fixed;
	margin: 0px;
	padding: 0px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
nav.sub ul li {
	font-family: "メイリオ", "ヒラギノ丸ゴ ProN W4", Verdana, sans-serif;
	font-size: 90%;
	color: #FFFFFF;
	background-color: #666666;
	padding: 5px;
	border-right: 1px solid #CCCCCC;
	display: table-cell;
}

関連記事

Archive

Category

Recent Entry