border-style:solidで文字がずれる

質問

URL用のテキストに枠線をつけました。通常はポインタを当てると下線がでると思いますが、最初に

a{
text-decoretion: none;
}

でもって下線を消しました。

次に
a hover{
border-style: solid;
padding: 5px;
}

によって枠線を作りましたところ、ポインタを当てると枠線はでるのですが、<li>のテキストが５pxほどずれてしまいます。

cssで

header ul li{
float: left;
padding: 0 70px 0 0;
}

こんな感じになら設定しており、float: left;で左詰めにしているせいでポインタを当てて枠線をが出た時に枠線分だけ右にずれるのが原因ではないかななどと思っていますが、兎にも角にも分かる方がいらっしゃいましたらすみませんが教えてください。

回答No.2

ORUKA1951 · ベストアンサー

a要素は行内(インライン)要素です。この行内要素ブロック要素の区別はHTML/CSSで重要なので覚えておくこと。
HTML4.01
　7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
CSS2.1
　9.2.1 ブロックレベル要素とブロックボックス( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#block-boxes )
　9.2.2インラインレベル要素とインラインボックス( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#inline-boxes )

※ a要素をボックスにする。(display:inline-block)
※ ボックスモデルの寸法はpadding辺の内側になる。
　　hover時にborderやpaddingを指定するとずれるのであらかじめ透明色(transparent)で指定しておく。

結果・・・
header ul{
text-align:center;/* 中央配置floatは使わない */
width:100%;/* 適当な幅に */
margin:0 auto;padding:0;
}
header ul li{
list-style:none;
display:inline-block;
position:relative;
width:20%;/* 適当な幅に */
padding:5px;
}
header ul li+li{
margin-left:70px;/* 二つ目以降は70px左をあける */
}
header ul li a{
text-decoration:none;
display:block;
width:100%;height:100%;/* 直近のstatic以外の親ブロック(li)に対して */
border-bottom:solid 2px transparent;
}
header ul li a:hover{
border-color:red;
}

お礼

詳しくありがとうございます！おかげで解決いたしました！

補足

具体例込みで大変ありがとうございます！明日チャレンジします！

回答No.1

t_ohta

a hover に padding: 5px を指定しているので5pxずれるのでしょう。

お礼

ありがとうございます！