ヘッダー分割のリンクボタンがヘッダーバーとずれている

最近、私はUpskillsからそのためにウェブサイトを開発する方法を学んでいます。これまでは、私が望むウェブサイトを構築し始めることで、HTMLとCSSの知識を強化しようとしています。私をイライラさせる1つのロードブロッキングは、ヘッダ部に収まるように設計されたリンクボタンの位置がずれることです。それと並行して、各リンクボタンの間には、私が望むものとは異なる小さなスペースがあります。ここでヘッダー分割のリンクボタンがヘッダーバーとずれている

は君たちが理解するためのコードです：

HTML

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>AntsHUD</title> 
     <link rel="stylesheet" href="style.css"/> 
     <link rel="stylesheet" href="ndt.ttf"/> 
    </head> 
    <body> 
     <div id="header"> 
      <h1 class="header-logo">AntsHUD</h1> 
      <a class="header-button" href="index.html">Home</a> 
      <a class="header-button" href="index.html">Downloads</a> 
      <a class="header-button" href="index.html">FAQ</a> 
     </div> 
    </body> 
</html>

CSS

* { 
    margin: 0px; 
    font-family: arial; 
} 

#header { 
    width: 100%; 
    height: 40px; 
    line-height: 40px; 
    background-color: rgba(0,0,0,0.8); 
    border-bottom: 4px solid rgb(0,191,255); 
} 

.header-logo { 
    display: inline-block; 
    width: 150px; 
    height: 40px; 
    padding: 0px 14px; 

    color: white; 
    text-shadow: 3px 3px rgba(0,0,0,0.8); 
} 

#header>.header-button:link, #header>.header-button:visited { 
    display: inline-block; 
    vertical-align: middle; 
    height: 40px; 
    padding: 0px 16px; 

    color: white; 
    text-decoration: none; 
} 

#header>.header-button:hover, #header>.header-button:active { 
    display: inline-block; 
    vertical-align: middle; 
    height: 40px; 
    padding: 0px 16px; 
    background-color: rgb(0,191,255); 

    color: white; 
    text-decoration: none; 
}

JSFiddle

I WOUなぜこのようなことが起こっているのかについての助けや解説をいただければ幸いです。

出典

2017-12-23 Asian Antwan

まず、「フレックスボックスデザイン」というコンセプトを探してみることをお勧めします。 hereからいくつかを読むことができます。また、より一貫したデザインのために、Bootstrapのようなコンポーネントライブラリを使用することもできます。次のように私はあなたの問題を解決することを選んだ方法は、次のとおりです。

* { 
 
\t margin: 0px; 
 
\t font-family: arial; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    background-color: rgba(0,0,0,0.8); 
 
    border-bottom: 4px solid rgb(0,191,255); 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.header-logo { 
 
    width: 150px; 
 
    height: 40px; 
 
    padding: 0px 14px; 
 
\t color: white; 
 
\t text-shadow: 3px 3px rgba(0,0,0,0.8); 
 
} 
 

 
a.header-button { 
 
    padding: 10px; 
 
    margin: auto 10px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
#header>.header-button:visited, 
 
#header>.header-button:hover, 
 
#header>.header-button:active { 
 
    background-color: rgb(0,191,255); 
 
    color: white; 
 
    text-decoration: none; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     <title>AntsHUD</title> 
 
     <link rel="stylesheet" href="style.css"/> 
 
     <link rel="stylesheet" href="ndt.ttf"/> 
 
    </head> 
 
    <body> 
 
     <div id="header"> 
 
      <h1 class="header-logo">AntsHUD</h1> 
 
      <a class="header-button" href="index.html">Home</a> 
 
      <a class="header-button" href="index.html">Downloads</a> 
 
      <a class="header-button" href="index.html">FAQ</a> 
 
     </div> 
 
    </body> 
 
</html>

はそれがお役に立てば幸いです。

出典

2017-12-23 02:51:49 tekintosh

ヘッダー分割のリンクボタンがヘッダーバーとずれている

答えて

関連する問題