<nav> 元素溢出 <header>

Question

<nav> 元素不会在 <header> 元素内呈现，即使它嵌套在里面。

我尝试使用 index-head class 将 over-flow:hidden 属性添加到 <header> 元素。我还尝试添加 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

因为您在 header 中添加了一个 "h1" 标签，默认情况下有

display: block

属性将元素拉伸到 "header" 元素的整个宽度。

要解决这个问题，必须在 "h1" 元素中添加 css 规则

display: inline-block;

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

Answer 2

在 <header> 中获取 <nav> 的最简单方法是将 <h1.brand-name> 元素设置为 display:inline-block。默认情况下，浏览器代理将 <hX> 标签设置为 display:block，它跨越这些元素 100% 的可用 space，在这种情况下是将你的 <nav> 推到它下面。由于 <header> 有一个固定的高度，这迫使 <nav> 在外面。

我也加了...

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

至<header.index-head>至space子元素垂直和水平均匀。

然后我将 flex-grow: 1; 添加到 <nav> 元素，这确保当 flex-box 确定其相对于其兄弟姐妹的宽度时需要 'priority'。

了解更多关于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>

<nav> element is overflowing the <header>

html

css

nav