CSS3アニメーション私はそれがリンク「私たちについて」プッシュ「ホーム」ボタンを置くと、私は起きてからそれを防ぐんか..見..

Question

イムは、ウェブサイト上で作業し、私はCSS3アニメーションで少し問題を発見し、別のLiをプッシュ？ は、ここでのコードです：

<div class="menu"> <ul> <li id="one"><a href="">Home</a></li> <li id="two"><a href="">About us</a></li> </ul> </div>

.menu ul{ 
margin: 0; 
padding: 0;} 

.menu li{ 
font-family: Helvetica, Arial sans-serif; 
margin: 20px 10px; 
display: inline-block; 
*display: inline;} 

.menu a{ 
position: relative; 
color: #999; 
text-decoration: none; 
padding: 20px; 
background-color: #DDD; 
-moz-border-radius: 0 0 20px 20px; 
-webkit-border-radius: 0 0 20px 20px; 
-border-radius: 0 0 20px 20px; 
-webkit-box-shadow: inset 10px -3px 10px #ccc;} 

.menu a:hover{ 
background-color: #eee; 
font-size: 150%; 
-webkit-box-shadow: 0 0 0 #eee; 
text-shadow: 0 0 10px #fff; 
-webkit-transition: 0.5s ease;} 

http://jsfiddle.net/nsdbV/

はあなたに感謝：あなたは、要素の大きさを:hoverにフォントサイズを変更することによりD

Answer 1

変化しており、それは私がブラウザから期待する動作です。あなたが相対するのではなく、position: absoluteを使用しない限り、私はこの問題を解決するために考えることができる唯一の方法は、transformプロパティを使用することです。私は少しここにあなたの例をammendedました：http://jsfiddle.net/nsdbV/2/

.menu a{ 
    display: inline-block; 
    -webkit-transition: -webkit-transform 0.5s ease; 
} 
.menu a:hover{ 
    -webkit-transform: scale(1.5); 
}​ 

だけではなく、テキストを拡大するには、これは150％の倍率でボックス全体を拡大縮小します。私は上に行った変更を示しただけですが、jsfiddleリンクはあなたにそれをどのように使用するかの良いアイデアを与えるはずです。あなたは少しCSSを調整する必要がありますが、うまくいけば、それはあなたに何かを与える。 D：