境界線は、私のNavagationバーで

境界線は、それらの後に少し余裕を持って彼らの右にわずかなマージンを持っています。ナビゲーションバーの要素にカーソルを合わせると表示されます。それはアニメーションを作る私は場所が醜いように置く。これを解決する方法はありますか？境界線は、私のNavagationバーで

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    @keyframes antimouse { 
    0% { background-color: #2F9EBD; 
     height: 45px} 
    100% { 
     background-color:#35B1C2; 
     height:20px;} 
    } 

    @keyframes mouse { 
    0% { background-color:#35B1C2; 
    height:20px} 
    100% { background-color: #2F9EBD; 
    height: 45px 
     } 
    } 




ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
    overflow:visible; 
    height:48px; 
    background-color:#35B1C2; 
    text-align: center; 
} 
    li{ 
    text-align: center; 
    display: inline-block; 
    } 


    li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    } 
    li a { 
    animation-fill-mode:forwards; 
    animation-duration: 0.5s; 
    animation-name: antimouse; 
    } 

    li a:hover { 
     animation-fill-mode:forwards; 
     animation-duration: 0.5s; 
     animation-name: mouse; 
    } 

    li { 
    border-right: 1px solid #bbb; 
    } 

    li:last-child { 
    border-right: none; 
    } 

</style> 

</head> 

<body> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="aboutme.html">About Me</a></li> 
    <li><a href="projects.html">Projects</a></li> 

     </ul> 

    </body> 

</html>

出典

2017-04-07 Vaibhav Shrivathsa

をここで少しヒントです。今日の時代では、最初に '<！DOCTYPE html>'タグを使用する場合、 ''タグを含める必要はありません。 ''と ''タグに直接進むことができます。 – NathanielSantley

は、このようなli要素間で改行削除するようにしてください：

<ul><li><a href="index.html">Home</a></li><li><a href="aboutme.html">About Me</a></li><li><a href="projects.html">Projects</a></li></ul>

出典

2017-04-07 23:55:15 Johannes

境界線は、私のNavagationバーで

答えて

関連する問題