読者です 読者をやめる 読者になる 読者になる

hover時のレイアウト崩れ

CSS HTML

 

hoverの時にborder-bottomをすると

 

f:id:retail:20150408221555p:plain

liの下に線が付いてしまいレイアウトが崩れてしまいます。

 

liの中に線を入れるとレイアウトが崩れません

f:id:retail:20150408221810p:plain

その時に必要なのが、line-heightとheightです。

#nav li {
    height: 50px;
}

#nav li a {
    line-height: 47px;
}

#nav li a:hover {
    border-bottom: 3px solid #F00;
}

とliの高さをheightで決めて、li a のline-heightを下線の分だけ少なくし、

border-bottomをすると上のようにレイアウトが崩れずにできます。