Question

<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>

Answer 1

Because you added a "h1" tag inside the header, which by default has

display: block

property that stretches the element to the entire width of the "header" element.

to solve this problem, you must add a css rule to the "h1" element

display: inline-block;

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

Answer 2

The simplest way to get the <nav> inside the <header> is to set the <h1.brand-name> element to display:inline-block. By default browser agents set <hX> tags to display:block, which spans those elements 100% of the available space and in this case is was pushing your <nav> down below it. Since the <header> has a fixed height this forced the <nav> outside.

I also added...

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

To <header.index-head> to space the child elements evenly vertically and horizontally.

I then added flex-grow: 1; to the <nav> element, which makes sure it takes 'priority' when flex-box determines its width relative to its siblings.

Learn more about 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>

<nav>元素溢出<header>

2 个答案: