liを使って、naviボタンを横並びで表示させるとき、もっとも簡単な方法としては、liに「display: inline-block」と指定してインライン表示にするものがあります。 とても便利なのですが、その反面、htmlの書き方によっては、liとliの間に余計な隙間ができてしまいます(inlineの改行は、半角の空白として認識されるため)。ぴったり隙間無しのデザインにしたい場合はこれに対処する必要があります。

サンプルはどれも横幅800pxの親要素の中に、幅20%のli要素を横並びで入れてあります。幅20%の要素を5つなので、本来はぴったり収まるはずですが、サンプル1では、liとliの間に余計な5pxほどの隙間(liタグの改行による)が生じたために親要素の幅に収まりきらず、レイアウトが崩れます。

サンプル1(レイアウト崩れ)

サンプル1のhtmlソース

  <ul>
    <li>home</li>
    <li>about</li>
    <li>products</li>
    <li>services</li>
    <li>contact</li>
  </ul>

サンプル共通のCSSソース

.navi {
	width:800px;
	margin:0 auto;
	}
.navi ul {
	margin:0;
	padding:0;
	}
.navi ul li {
	background-color: #37d;
	color:#fff;
	padding:4px 0;
	text-align: center;
	display: inline-block;
	font-size: 14px;
	width: 20%;
	}
.navi ul li:nth-child(even) {
	background-color: #64d;
	}

● htmlのliの記述で改行せず一列にすることで、この隙間をなくすことができます。ただし、ソースがとても見づらくなります。

サンプル2(隙間をなくす1)

サンプル2のhtmlソース

  <ul>
    <li>home</li><li>about</li><li>products</li><li>services</li><li>contact</li>
  </ul>
● htmlのliの記述を変更することなく隙間をなくす方法です。サンプル3はサンプル1と同じhtmlとCSSを使い、ulの指定のみ「font-size:0」を追加しています。文字の表示に関しては、liであらためて「font-size:14px」を指定しているので、問題ありません。

サンプル3(隙間をなくす2)

サンプル3のCSSソース(変更部分のみ)

.navi2 ul {
	margin:0;
	padding:0;
	font-size:0; /* 追加 */
	}

 

 

戻るボタン