html - 如何制作 header 在左侧，徽标在右侧的标题？

我想在网页的标头放在左侧，徽标在左侧，水平导航栏在右侧。

问题是，每当我缩小浏览器窗口时，导航栏就会移至标题容器的边框下方，从而违反了页面的结构。

像这样：


有什么解决办法吗？我只能想到使父容器的Header适应子容器的高度，但是我不知道如何实现。还是应该以某种方式使用媒体查询？

我写了下面的代码。

header {
  height: 100px;
  background-color: gray;
  background-image: url('img/background.gif');
}
#logo {
  float: left;
}
nav {
  float: right;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<header>
  <img id="logo" src="images/logo.png">
  <nav>
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#services">Services</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#blog">Blog</a>
      </li>
      <li><a href="#contacts">Contacts</a>
      </li>
    </ul>
  </nav>
</header>

最佳答案

您可以使用flex模型或min-height +溢出来处理浮动元素。您也可以同时使用两者，在受支持的情况下，float属性将被flex覆盖。 ，

header {
  min-height: 100px;
  background-color: gray;
  background-image: url('img/background.gif');
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  overflow:hidden; /* for float if flex not supported */
}
#logo {
  float: left;
  /* to deal with flex */
  flex-shrink:0;
  margin:auto;/* or 0 or auto auto auto 0 or ... */
}
nav {
  float: right;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

<header>
  <img id="logo" src="http://dummyimage.com/140x45&text=logo.png">
  <nav>
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#services">Services</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#blog">Blog</a>
      </li>
      <li><a href="#contacts">Contacts</a>
      </li>
    </ul>
  </nav>
</header>

关于html - 如何制作 header 在左侧，徽标在右侧的标题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42040694/