如何制作左侧带徽标的标题和右侧的导航？

Question

我想把标题放到我的网页上，标识位于左侧，水平导航栏位于右侧。

问题在于，每当我缩小浏览器窗口时，导航栏都会低于标题容器的边框，从而违反了页面的结构。

像这样：

有什么解决方案吗？我只能想到让父容器Header容纳它对子容器的高度，但我不知道如何实现它。或者我应该以某种方式使用媒体查询？

我写了以下代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用flex模型或min-height + overflow来处理浮动元素。您也可以同时使用两者，浮动属性将被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>

Answer 2

尝试让你的li显示“inline-block”？我认为你必须把块设置为“li a”。 然后，您可能必须为ul本身设置一个设置宽度，以便它随页面缩小或使用媒体查询。 我希望这会有所帮助：）