根据 div 宽度翻译标签

Question

这主要是一个帖子，不要用不相关的信息把另一个帖子弄得乱七八糟。

我正在尝试在标签上使用翻译，其距离应基于其旁边的菜单 div。所述菜单最初不显示，并且标签用作显示/隐藏菜单的复选框。它还有一个基于页面宽度的集合max-width，这是我遇到一些问题的地方。当页面足够宽时，设置像素量的平移工作正常。但是，当页面变得太窄时（例如在移动设备上），标签会离右侧太远，有时甚至会夹在右侧的按钮中。 下面是一些图片来说明这一点。

隐藏菜单的菜单标签：

这是它目前的样子：

这里，标签在右侧太远了，因为菜单 div 现在位于其 max-width。

这就是我想要的样子：

这是我的代码：

.topnav .dropdown {
    display: none;
    overflow-y: auto;
    position: absolute;

    z-index: 10;
    width: 200px;
    max-width: 50%;

    /* [...] */
}

#dropdown-toggle-label {
    display: block;

    margin: auto 0;
    padding: .5em;
}

#dropdown-toggle:checked + label {
    transform: translateX(215px);
    -ms-transform: translateX(215px);
}

#dropdown-toggle:checked ~ .dropdown{
    display: block;
}

<div class="topnav">
    <input type="checkbox" id="dropdown-toggle">
    <label for="dropdown-toggle" id="dropdown-toggle-label"><i class="fas fa-bars"></i></label>
      <ul class="dropdown">
        ...
      </ul>
</div>

如果可能的话，我想在不使用 javascript 的情况下解决这个问题。

编辑：这是一个说明问题的JSFiddle。

Answer 1

尝试设置width 而不设置max-width 并使用margin-left 设置左侧间隙。

所以编辑的类看起来像这样：

.topnav .dropdown {
  display: none;
  overflow-y: auto;
  position: absolute;
  z-index: 10;
  width: 215px;
  height: auto;
}

#dropdown-toggle:checked + label {
  margin-left: 230px;
}

如果您想调整移动设备的差距，那么我们创建以下规则：

@media (max-width: 620px) {
  .topnav .dropdown {
    width: 24%;
  }

  #dropdown-toggle:checked + label {
    margin-left: 27%;
  }
}

一个例子：

.topnav .dropdown {
  display: none;
  overflow-y: auto;
  position: absolute;

  z-index: 10;
  width: 215px;
  height: auto;
}

#dropdown-toggle {
  display: none;
}

#dropdown-toggle-label {
  display: block;
  margin: auto 0;
  padding: 0.5em;
}

#dropdown-toggle-label:hover {
  cursor: pointer;
}

#dropdown-toggle:checked + label {
  margin-left: 230px;
}

#dropdown-toggle:checked ~ .dropdown {
  display: block;
}

.topnav .right-bound {
  display: flex;
  margin-left: auto;
}

@media (max-width: 620px) {
   .topnav .dropdown {
        width: 24%;
    }

    #dropdown-toggle:checked + label {
        margin-left: 27%;
    }
}


/* Typography (irrelevant for the problem) */

:root {
  --primary-text-color: #fff;
  --highlight-text-color: rgb(10, 138, 101);

  --primary-color: rgb(13, 189, 139);
  --secondary-color: #e9e9e9;
  --background-color: #f6f6f6;

  --primary-highlight-color: rgb(9, 153, 112);
  --secondary-highlight-color: #9c9c9c;

  --topnav-height: 70px;
  --banner-height: 450px;
}

.topnav {
  --clr-highlight: var(--secondary-color);

  display: flex;
  width: 100%;
  height: var(--topnav-height);
  background-color: var(--primary-color);
  overflow: hidden;

  font-weight: bold;
}

.topnav ul {
  display: flex;
  height: inherit;
  margin: 0;
  padding-left: 0;
}

.topnav li {
  list-style-type: none;
  margin: auto 1em;
  cursor: pointer;
}

.topnav a {
  text-decoration: none;
  color: var(--primary-text-color);
}

.topnav .dropdown {
  background-color: var(--primary-color);
  padding: 0 1em 1em 0;

  -webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
}

.dropdown li {
  padding: 1em 0;
}

#dropdown-toggle-label {
  font-size: 1.5em;
  color: var(--primary-text-color);
}

<div class="topnav">
    <input type="checkbox" id="dropdown-toggle">
    <label for="dropdown-toggle" id="dropdown-toggle-label">O<i class="fas fa-bars"></i></label>
    <ul class="dropdown">
      <li>
        <a href="/#A">A</a>
      </li>
      <li>
        <a href="/B">B</a>
      </li>
      <li>
        <a href="/C">C</a>
      </li>
      <li>
        <a href="/D">D</a>
      </li>
    </ul>
    <ul class="right-bound">
      <li>
        <a href="/login">Login</a>
      </li>
    </ul>
  </div>