ul要素のfloatで下に隙間ができる時の解決策!メニュー作成中にhoverしたら隙間が、、

こんにちはマダラです。

今回はワードプレスのポートフォリオ用に自作テーマを作っていた際にはまったポイントを消化します!

今回、ワードプレスのメニューを出力する関数を用いました!

<?php if ( has_nav_menu( 'topbar' )){
      $args = array(
        'theme_location' => 'topbar',
        // ul要素を囲むかどうか。使えるタグはdiv、nav。囲まない場合はfalseを指定。初期値はdiv
        'container'      => '',
        // メニューのリンク前に表示するテキスト。初期値はなし
        'link_before'    => '',
        // メニューのリンク後に表示するテキスト。初期値はなし
        'link_after'     => '',
        // メニュー項目を囲むタグ。囲むタグをなしにする場合でも、パラメータを指定し %3$s の記述が必須
        'items_wrap'     =>'<div id="top-menu"><ul class="menu" ontouchstart="">%3$s</ul></div>'
      );
      wp_nav_menu( $args );
    }; ?>

そして、メニューのli要素に対して、inline-blockを指定して横並びにしました!
その後、メニューに対してhoverスタイルを追加していたところ問題にぶち当たりました。

ちょっと見づらいかもしれませんが、、
メニューの下側に隙間ができるわけですね、、hoverデザインを適用するとよく確認できます。なんだこれはと、

何度確認しても、marginやpaddingは処理済みだし、、

スポンサーリンク

font-size:0px;で解決できるけど、、、

その時、似たようなinline-blockの横並びの際にできる隙間は親要素に

font-size:0px;

をつければ、修正されるのを思い出しました。

まさかと思いつつ、ulの親要素に当たるtop-menuに対して、font-size:0px;を指定すると無事、隙間が埋まりました。。

なんだったんだろうなぁ〜〜

調べたらわかりそうだけどめんどくさいからいいや、、、

改行でも入ってるのかね、、

解決策は vertical-align:bottom;を使おう!

ちゃんと調べました笑

下記の記事を参考にさせていただきました
https://tukihatu.hatenablog.com/entry/20131203/1386077778

floatがかかっているblock内(li内)の要素に画像がある場合改行コードが文字として認識されてしまいフォントサイズ文の幅を持つバグ

と記述されていました。

あれ?別に私の事例では別に画像使ってないけど、、

とりあえず試してみるか。

.menu {
font-size: 12px;
display:inline-block;
list-style: none;
padding:0;
vertical-align:bottom;
}

というわけで、ul要素につけているクラスであるmenuにvertical-align:bottom;
をつけてみたら無事縦の隙間が解消されました!

気分的にはfont-size:0px;を使うよりもスマートな対応な気がします!

まとめ!

floatの横並びでできる縦の隙間には,vertical-align:bottom;で解決!!!(どんっ)

しっかりevernoteにメモしておきました!

ではでは!

スポンサーリンク

気に入ったらシェア!

フォローする

スポンサーリンク