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>

Моя задача состоит в том, чтобы сделать «Мою страницу» h1 в строке, как указано в CSS

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

для того, чтобы получить заголовок h1 «мою страницу», чтобы перейти в линию с неупорядоченным списком, мне нужно переместить h1 в HTML для нижней стороны <nav> (в отличие от того, где он теперь находится под тегом открытия заголовка), но я не могу понять, почему он будет включен, когда я это сделаю, но это не произойдет, когда я оставлю его так, как сейчас.
Это мое понимание того, что в CSS, если у вас есть следующее:

header h1{ 
    some styling here; 
}

... что любые h1 под ним заголовка будут затронуты, однако, не происходит в моем коде в данный момент.

источник

2016-11-03 tugjg

Ваш 'nav' является' block'. Это браузер по умолчанию. Вы должны сделать это 'inline' – pol

Ваш h1 имеет встроенный дисплей, но проблема в том, что он находится рядом с nav, который является элементом уровня блока. Блочные элементы занимают столько же ширины, сколько могут, в то время как встроенные элементы занимают столько же ширины, сколько необходимо (см. w3schools). Вам нужно будет поменять дисплей на nav на inline или inline-block, чтобы он не занимал столько места.

источник

2016-11-03 19:57:03