<nav> элемент переполняет <header> - PullRequest
Новая
       8

<nav> элемент переполняет <header>

0 голосов
/ 17 февраля 2019

Элемент <nav> не отображается внутри элемента <header>, даже если он вложен внутрь.

Я попытался добавить свойство over-flow:hidden к элементу <header>, используя index-headучебный класс.Я также попытался добавить и position:relative и position:absolute. 

 *{
      margin: 0;
      padding: 0;
  }
  ul{
      list-style: none;
  }
  a{
      text-decoration: none;
  }
  .index-head{
      height: 90px;
      width: 100%;
      background-color: #000;
      overflow: hidden;
  }
  .logo{
      width: 50px;
      float: left;
      margin: 20px;
      margin-right: 0;
  }
  .brand-name{
      color: #ffc107;
      line-height: 90px;
      font-family: 'Catamaran', sans-serif;
  }
  .index-head nav{
      float: right;
      margin-top: 0;
      width: 50%;
  }
  .index-head nav ul li{
      list-style: none;
      display: inline-block;
      font-size: 25px;
      padding-left: 50px;
  }
<body>
    <header class="index-head">
        <a href="#"><img class="logo" src="images/logo.png"></a>
        <h1 class="brand-name">Eeat</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Signup</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>
</body>

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Самый простой способ получить <nav> внутри <header> - установить элемент <h1.brand-name> на display:inline-block.По умолчанию агенты браузера устанавливают теги <hX> на display:block, что охватывает эти элементы на 100% доступного пространства и в этом случае толкает <nav> вниз под ним.Поскольку <header> имеет фиксированную высоту, это вынудило <nav> выйти наружу.

Я также добавил ... 

display: flex;
align-items: center;
justify-content: space-between;

К <header.index-head> для равномерного размещения дочерних элементов по вертикали и горизонтали.

Затем я добавил flex-grow: 1; к *Элемент 1019 *, который обеспечивает его приоритетность, когда flex-box определяет его ширину относительно своих братьев и сестер.

Подробнее о Flex Box 

 *{
      margin: 0;
      padding: 0;
  }
  ul{
      list-style: none;
  }
  a{
      text-decoration: none;
  }
  .index-head{
      height: 90px;
      width: 100%;
      background-color: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .logo{
      width: 50px;
      float: left;
      margin: 20px;
      margin-right: 0;
  }
  .brand-name{
      color: #ffc107;
      line-height: 90px;
      font-family: 'Catamaran', sans-serif;
      display: inline-block;
  }
  .index-head nav{
      float: right;
      margin-top: 0;
      width: 50%;
      flex-grow: 1;
  }
  .index-head nav ul li{
      list-style: none;
      display: inline-block;
      font-size: 25px;
      padding-left: 50px;
  }
<body>
    <header class="index-head">
        <a href="#"><img class="logo" src="images/logo.png"></a>
        <h1 class="brand-name">Eeat</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Signup</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>
</body>
0 голосов
/ 18 февраля 2019

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

display: block

, которое растягивает элемент на всю ширину элемента "заголовка".

Чтобы решить эту проблему, вы должны добавить правило css к элементу "h1" 

display: inline-block;

JSFiddle link: https://jsfiddle.net/nzf1egcr/1/

...