CSSのフッターでナビゲーションが移動しています

Question

フッタに<nav>を実装しようとしましたが、これは最終結果ですfiddleこれは完全に間違っています。私は<nav>の項目を定数にする必要があります。

Answer 1

はこれを試してください：あなたはすべての項目に詰めたい場合

footer{ 
    width: 100%; 
    background-color: #222; 
    height: 150px; 
    margin-top: 50px; 
} 

.center-footer{ 
    text-align: center; 
} 

.footer-nav nav ul li{ 
    display: inline-block; 
    padding: 5px; 
    font-size: 18px; 
    padding-top: 27px; 
    margin-right: 15px; 
} 

.footer-nav nav ul li a:hover { 
    background-color: #111; 
    padding: 5px; 
} 

.footer-nav nav ul li a{ 
    display: block; 
    padding: 5px; 
    background-color: #dddddd; 
} 

Answer 2

あなた.footer-nav nav ul li a:hoverパディングはそれをやっている：

.footer-nav nav ul li a:hover { 
    background-color: #111; 
    //padding: 5px; 
} 

ので.footer-nav nav ul liにパディングを追加または削除のいずれか（上記参照）:hover中。

.footer-nav nav ul li a { 
    padding: 5px; 
} 

Answer 3

まず、あなたのフィドルにあなたはそれがフィドルで正しく動作しない可能Aの後にコロンを、持っています。

.footer-nav nav ul li a:{ 
    display: block; 
    padding: 8px; 
    background-color: #dddddd; 
} 

第二に、あなたはその通常の状態ではaの上に同じパディング幅を持っている必要があり、その中のとき：ホバー、そうでなければ、常にジャンプを取得します。

第3に、 "a"をブロックする必要はありません。

第4に、スムーズに移行するように設定します。

.footer-nav nav ul li a:hover { 
    background-color: #111; 
    padding: 8px; 
    transition: all ease-in .3s; 
    -webkit-transition: all ease-in .3s; 
    -moz-transition: all ease-in .3s; 
    -o-transition: all ease-in .3s; 
} 

.footer-nav nav ul li a { 
    display: block; 
    padding: 8px; 
    background-color: #dddddd; 
    transition: all ease-in .3s; 
    -webkit-transition: all ease-in .3s; 
    -moz-transition: all ease-in .3s; 
    -o-transition: all ease-in .3s; 
}