苦手なCSSを頑張るお話

コンテンツの増減でデザイン変更になった際にスタイルシートの改修が発生。

リスト要素をキレイに横並びしている部分がうまく調整できなかったので備忘録。

display

改修前は下記のようなリストが5個並んでて中央寄せになっている。

あとで気づいたけど正確に中央ではなかったんですがね。

list1
list2
list3
list4
list5

htmlがこんな感じで

<div class="c_div1">
	<div class="c_div2">
		<ul class="c_ul">
			<li class="c_li">list1</li>
			<li class="c_li">list2</li>
			<li class="c_li">list3</li>
			<li class="c_li">list4</li>
			<li class="c_li">list5</li>
		</ul>
	</div>
</div>

cssがこんな感じ

.c_div1{
	background:#fffacd;
	padding:20px 0;
}
.c_div2{
	max-width:320px;
	margin-left:auto;
	margin-right:auto;
	padding:0 10px;
}
.c_ul{
	list-style-type:none;
	padding-left:0px;
	height:40px;
	background:#f0f8ff;
}
.c_li{
	width:50px;
	float:left;
	background-color:#cccccc;
}

list2とlist3が不要になったので普通にliを削除したところ中央寄せにならない。

<div class="c_div1">
	<div class="c_div2">
		<ul class="c_ul">
			<li class="c_li">list1</li>
			<li class="c_li">list4</li>
			<li class="c_li">list5</li>
		</ul>
	</div>
</div>

list1
list4
list5

widthいじったりわちゃわちゃしたけど改善できず。。。

ググっていたらdisplay:inline-block;で解決できそう。

CSS Layout - inline-block

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Py...

cssを下記のように修正。

.c_div1{
	background:#fffacd;
	padding:20px 0;
}
.c_div2{
	max-width:320px;
	margin-left:auto;
	margin-right:auto;
	padding:0 10px;
}
.c_ul{
	list-style-type:none;
	padding-left:0px;
	height:40px;
	background:#f0f8ff;
	text-align:center; /* add */
}
.c_li{
	width:50px;
	float:left;
	background-color:#cccccc;
	text-align:left; /* add */
	display:inline-block; /* add */
}

中央寄せできた！