リスト(inline-block)の改行には注意

Yukimi Sato 669views 更新:2014年3月3日

今回トップページとマイページにタブメニューを追加し、より見やすくしました。
その時にどちらもソースコードはおなじなのに、タブの両サイドのスペースが明らかに違う…ということがありました。

原因は「display:inline-block;」が指定されていたことです。

inline-blockはソースコード前後の改行を含むスペースを認識してしまうので、
今回のように丁寧にわかりやすく書いたソースコードだと逆にそれがスペースの原因となってしまいます。

<ul>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
</ul>

このようにインデントが入っていると間違いなくばらつきがでます。
リストで不思議なスペースができてしまっていた時はCSSだけではなくコード側の見直しも検討してみてください。

コメント

  1. Yukimi Sato のコメント (2014年3月3日)

    補足:
    「display:inline-block;」はとても優秀です。
    リストで横並びの時は「float:left;」を主に使ってしまいますが、
    clearfixの指定も必要だったり、floatの中にfloatなどややこしいことになることもあります。
    そんな時におすすめです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません