display:inlineでリストを横並びにした時にできる余白を解消する

2014年07月27日
follow us in feedly

li要素をdisplay:inlineを使って横並びにさせると、li要素の間に半角スペースが入ってul要素の幅に収まりきれずに改行されてしまうことがあります。

これはli要素の記述が下記のように改行されていると起こります。

<ul>
 <li>イチゴ</li>
 <li>リンゴ</li>
 <li>りんご</li>
 <li>ミカン</li>
 <li>メロン</li>
</ul>

この半角スペースはCSSでmarginとpaddingを0にしても消えません。なぜでしょうか?

これは一般的なブラウザが改行を半角スペースとして認識するため、横並びのli要素の間に半角スペースが入ってしまうことが原因です。

解決策

1.li要素を改行しない

そもそも改行が原因なのですから改行をせずに下記のように記述すると余白の問題は解決します。ただし、li要素が多くなったりa要素などがソースに追加されると見づらくなりメンテンナス性が低下します。

<ul>
<li>イチゴ</li><li>リンゴ</li><li>りんご</li><li>ミカン</li><li>メロン</li>
</ul>

2.li要素をHTMLコメントでつなげる

li要素どうしをHTMLコメントでつなげると改行していても余白はできません。

<ul>
 <li>イチゴ</li><!--
 --><li>リンゴ</li><!--
 --><li>りんご</li><!--
 --><li>ミカン</li><!--
 --><li>メロン</li>
</ul>

3.display:table-cellを指定する

li要素に対してdisplayプロパティでteble-cellを指定すると余白はできません。それならul要素に「display: table;」と「table-layout:fixed;」を指定し、li要素に「display: table-cell;」を指定して横並びにした方がいいですかね。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ