宽度减小时如何获得重叠效果？

Question

我模仿了一个网站：https://open.weixin.qq.com/

如果我缩小浏览器的宽度，您会看到重叠是我的要求。

但是在我减少浏览器宽度的项目中，我会得到这种令人厌烦的效果：

我的代码如下，图像无法显示，但这不是重点：

.header {
    width: 100%;
    height: 68px;
    background-color: #363636;
  }

  .container {
    margin-left: 40px;
    margin-right: 40px;
  }

  .container > div {
    display: inline-block;
  }

  .logo {
    height: 100%;
    width: 240px;
  }

  .logo img {
    width: 100%;
    height: 100%;
  }
  
  .nav {
    display: inline-block;

  }

  .nav li {
    width: 96px;
    height: 100%;
    color: #afafaf;
    line-height: 68px;
    float: left;
  }

  .nav li :hover {
    color: #fff;
    text-align: center;
  }

  .nav .selected {
    color: #fff;
  }

  .right-buttons {
    float: right;
  }

  .login-logout {
    float: right;
    display: inline-block;
    height: 68px;
    color: #ffffff;
    line-height: 68px;
  }

  .qrcode {
    float: right;
    display: inline-block;
    width: 68px;
    height: 68px;
    align-content: center;
    line-height: 68px;
  }

  .qrcode img {
    line-height: 68px;
    width: 14px;
    height: 14px;
  }

<div class="header">
    <div class="container">
      <div class="logo">
        <img src="../../assets/img/common/logo.png">
      </div>
      <ul class="nav">
        <li class="nav-item selected">首页</li>
        <li class="nav-item">数据中心</li>
      </ul>
      <div class="right-buttons">
        <div class="login-logout">
          <button>登录/注册</button>
        </div>
        <div class="qrcode">
          <img src="../../assets/img/home/little-qrcode.png">
        </div>
      </div>
    </div>
  </div>

如何获得上层效果？

Answer 1

据我所知，你需要右键div与导航ul重叠，而不是转到下一行。

申请＆＃34;职位：绝对＆＃34;和＆＃34;右：0＆＃34;用右键代替＆＃34; float：right＆＃34;。

但是在较小的宽度中，重叠会使用户感到困惑。因此，您可以更好地响应所有设备。