머리글 구분에 대한 링크 단추가 머리글 막대와 맞지 않습니다.

최근에 나는 Upskills에서 웹 사이트를 개발하는 방법을 배우고 있습니다. 지금까지, 나는 내가 원하는 웹 사이트를 만들기 시작하여 HTML과 CSS에 대한 나의 지식을 강화하려고 노력하고있다. 나를 좌절시키는 하나의로드 블록은 헤더 부분에 맞도록 설계된 링크 버튼이 잘못 정렬되어 있다는 것입니다. 그와 함께, 각 링크 버튼 사이에 작은 공간이있어서 내가 원하는 바가 아닙니다. 여기 머리글 구분에 대한 링크 단추가 머리글 막대와 맞지 않습니다.

너희들이 이해하기위한 코드입니다 :

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 올릴 때 왜 이런 일이 일어나고 있는지에 관해서는 도움이나 설명을 해 주셔서 감사드립니다.

출처

2017-12-23 Asian Antwan

먼저 "flexbox 디자인"개념을 제안합니다. 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

머리글 구분에 대한 링크 단추가 머리글 막대와 맞지 않습니다.

답변

관련 문제