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

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 重叠到 nav ul 而不是转到下一行。

将“position:absolute”和“right: 0”应用于右键而不是“float: right”。

但在较小的宽度中，重叠会使用户感到困惑。所以你最好让它响应所有设备。