页面缩放时如何避免徽标div和菜单div重叠？

Question

我在header-bottom class div中有两个名为.logo和.menu类的div类。

<header class="header-bottom">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="REVELATION" /></a>
</div>
<nav class="menu">
    <ul>
        <li class="current"><a href="#">homepage</a></li>
        <li><a href="#">site demo</a></li>
        <li><a href="#">full width</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">dropdown</a></li>
    </ul>
</nav>

现在的问题是，当我更改浏览器窗口或缩放时，.logo和.menu类内容相互重叠。如果我在logo中设置宽度然后问题就解决了，但是我想要另一个简单的方法来挖掘整个.logo类div，即使没有内容。 盒子大小，定位可能解决了问题，但如何？我不知道。

*{
    margin:0 ;
    padding:0;
}

/* hedaer bottom*/
.header-bottom 
{
    padding-top:40px;
    overflow:hidden;
}
.header-bottom .logo
{
    width:15%;
    float:left;
    display: inline-block;
}

.header-bottom .menu
{
    width:85%;
    float:left;     
}
.header-bottom .menu ul
{
    list-style:none;
    float:right;
    margin-top:15px;
    padding-right:12px;
}
.header-bottom .menu ul li
{
    float:left; 
    padding-bottom:10px;
    padding-right:10px;
    border-bottom:1px solid #ededed;
}
.header-bottom .menu ul li:last-child
{
    padding-right:0px;
}

.header-bottom .menu ul li a
{
    text-decoration:none;
    font-family:Georgia Regular;
    font-size:13px;
    font-weight:normal;
    color:#55415f;
    text-transform:uppercase;
    /* border-bottom:2px solid transparent;*/
}
.header-bottom .menu ul li a:hover
{
    padding-bottom:10px;
    border-bottom:2px solid #55415f;
}
.header-bottom .menu .current a
{
    border-bottom:2px solid #55415f;
    padding-bottom:10px;
}

Answer 1

这是使用Flexbox的开始。

display: flex上的.header-bottom设置会使.logo和.menu并排，例如表格单元格，以及flex-grow: 1上的.menu设置会使.menu占用剩余的空间，而不是.logo

占用的空间

最后，在align-items: center上设置.header-bottom后，您不需要使用上/下填充来居中.logo和.menu，align-items是为你做的，类似于vertical-align: middle对inline元素的作用。

* {
  margin: 0;
  padding: 0;
}


/* hedaer bottom*/

.header-bottom {
  padding-top: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.header-bottom .logo {
  padding-right:10px;
}

.header-bottom .menu {
  flex-grow: 1;
}

.header-bottom .menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}

.header-bottom .menu ul li {
  border-bottom: 1px solid #ededed;
  padding-right:10px;
}

.header-bottom .menu ul li:last-child {
}

.header-bottom .menu ul li a {
  text-decoration: none;
  font-family: Georgia Regular;
  font-size: 13px;
  font-weight: normal;
  color: #55415f;
  text-transform: uppercase;
  /* border-bottom:2px solid transparent;*/
}

.header-bottom .menu ul li a:hover {
  border-bottom: 2px solid #55415f;
}

.header-bottom .menu .current a {
  border-bottom: 2px solid #55415f;
}

<header class="header-bottom">
  <div class="logo">
    <a href="#"><img src="images/logo.png" alt="REVELATION" /></a>
  </div>
  <nav class="menu">
    <ul>
      <li class="current"><a href="#">homepage</a></li>
      <li><a href="#">site demo</a></li>
      <li><a href="#">full width</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">gallery</a></li>
      <li><a href="#">dropdown</a></li>
    </ul>
  </nav>