HTML 및 CSS 태그

나는 다음과 같은 HTML 코드가 :HTML 및 CSS 태그

body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background: #999; 
 
    color: white; 
 
    padding: 15px 15px 0 15px; 
 
} 
 

 
header h1 { 
 
    margin: 0; 
 
    display: inline; 
 
} 
 

 
nav ul{ 
 
    margin: 0px; 
 
    display: inline; 
 
} 
 

 
nav ul li{ 
 
    background: black; 
 
    color: white; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    padding: 5px 15px; 
 
    margin: 0; 
 
} 
 

 
nav ul li a{ 
 
    color:white; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
     <title>CSS Layouts</title> 
 
     <link rel="stylesheet" href="styles/main.css"> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <h1>My Page</h1> 
 
      <nav> 
 
       <ul> 
 
        <li><a href="#"></a>Home</li> 
 
        <li><a href="#"></a>Blog</li> 
 
        <li><a href="#"></a>About</li> 
 
        <li><a href="#"></a>Contact</li> 
 
        <li><a href="#"></a>Links</li> 
 
       </ul> 
 
      </nav> 
 
     </header> 
 
     
 
     <div class="row"> 
 
      <div class="col">col1</div> 
 
      <div class="col">col2</div> 
 
      <div class="col">col3</div> 
 
     </div> 
 
     <footer>2016 My Site</footer> 
 
    </body> 
 
</html>

내 문제는 CSS에 명시된 바와 같이 "내 페이지"라인에서 H1을 만드는 것입니다

순서없는 목록과 함께 인라인 가고 "마이 페이지"를 H1 헤더를 얻기 위하여

header h1 { 
    margin:0; 
    display: inline; 
}

, 나는의 아래에 HTML에서 H1를 이동해야3210 여는 태그 (현재는 헤더 여는 태그 아래에 위치)와 반대하지만, 내가 그렇게 할 때 인라인으로가는 이유를 알 수는 없지만, 현재처럼 떠날 때는 그렇지 않습니다. 헤더의 아래에있는 H1의의 영향을받을 것으로

header h1{ 
    some styling here; 
}

이 ... 그러나 그것은 현재 내 코드에서 일어나는되지 않습니다
그것은 CSS에서, 당신이있는 경우 다음과 같은 것을 나의 이해이다. 귀하의 h1 않습니다

출처

2016-11-03 tugjg

'nav'은'블록 '입니다. 이것이 브라우저 기본값입니다. 그걸'인라인 '으로 만들어야 해. – pol

디스플레이 인라인을 가지고 있지만 문제는 블록 레벨 요소입니다 nav 옆에 있다는 것입니다. 블록 요소는 가능한 한 많은 너비를 차지하지만 인라인 요소는 필요한만큼만 너비를 차지합니다 (w3schools 참조). 너비가 너무 많이 사용되지 않도록하려면 nav의 디스플레이를 inline 또는 inline-block으로 변경해야합니다.

출처

2016-11-03 19:57:03