初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS display:inline-block li要素を均等に配置する

昨日に引き続きdisplay:inline-blockシリーズです。横並びにした後に要素を均等に配置する方法を書いてみます。

例のごとく複数ボックスを作り色分けしておきましょう。

HTMLは下記のように記述します。

<div id="container">
<ul>
	<li class="box1"><a href="#">box1</a></li>
	<li class="box2"><a href="#">box2</a></li>
	<li class="box3"><a href="#">box3</a></li>
	<li class="box4"><a href="#">box4</a></li>
</ul> 
</div>

《下準備のCSS

* {
	margin: 0;
	padding: 0;
}
#container {
	background:#BDD9C3;
}
.box1 {
background:#CBB7DA;
}
.box2 {
	background:#FDFAC5;
}
.box3 {
	background:#F7C7C7;
}
.box4 {
	background:#F9CAAC;
}
ul{
	width:600px; 
	margin:100px auto;
	background:#DEF;
}

li{
	display: inline-block;/*ブロックレベル要素に横並びにする*/
	width:100px; 
	height:100px;
	line-height: 100px;
	text-align: center;
}

下準備段階だとこのような表示になります。

li要素が左側に寄っており、余計な隙間があります。
これを記述を加え、li要素を均等にしていきます。
f:id:bellsmarket:20150305203820p:plain

ul{
	width:600px; 
	margin:100px auto;
	background:#DEF;
	height:100px;/*指定しないとul:afterで【padding】のように下部が広がる*/
	text-align: justify;
	text-justify: distribute-all-lines; 
}
ul:after {
	content:"";
	display: inline-block;
	width: 100%;
	line-height:0;
	height: 0;
} |

ulに高さを指定してあげないと、ul:afterの絡みで下記の画像のように余計な高さが発生します。高さをli要素と揃えてあげることでこの余計なスペースの発生を防ぐことが出来ます。

f:id:bellsmarket:20150305203824p:plain




Firefoxはこの記述で余計な隙間もなくul要素で指定した幅の中で均等に配置されました。Google Chromeでは更に少し加えると隙間もなくせます。

ul{
	width:600px; 
	margin:100px auto;
	background:#DEF;
	height:100px;/*指定しないとul:afterで【padding】のように下が広がる*/
	letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する。 */
	text-align: justify;
	text-justify: distribute-all-lines; 
}
ul:after {
	content:"";
	display: inline-block;
	width: 100%;
	line-height:0;
	height: 0;
} 
li{
	letter-spacing:normal;
	display: inline-block;/*ブロックレベル要素に横並びにする*/
	width:100px; 
	height:100px;
	line-height: 100px;
	text-align: center;
}

f:id:bellsmarket:20150305203815p:plain

topへ戻る