根据div宽度翻译标签 [英] Translating label based on div width

问题描述

这主要是为了避免杂乱无章的信息.

This is mostly a post to not clutter another one with irrelevant information.

我正在尝试在标签上使用翻译，标签的距离应基于标签旁边的菜单div.最初不显示所述菜单，并且标签用作显示/隐藏菜单的复选框.它还根据页面宽度设置了 max-width ，这正是我遇到的一些问题.当页面足够宽时，按设置的像素量进行平移效果很好.但是，如果页面变得太窄(例如在移动设备上)，则标签距离右侧太远，有时甚至会夹在右侧的按钮中.下面是一些图片来说明这一点.

I am trying to use a translation on a label, the distance of which should be based on a menu div next to it. Said menu is initially not displayed and the label acts as a checkbox to show/hide the menu. It also has a set max-width based on the page width which is where I'm running into some issues. When the page is wide enough, the translation by the set pixel amount works fine. However, when the page gets too narrow (e.g. on a mobile device), the label is too far to the right and sometimes even clips into the button on the right. Below are some images to illustrate this.

隐藏菜单的菜单标签:

这是当前的外观:

在这里，标签太右边了，因为菜单div现在处于其最大宽度.

Here, the label is too far on the right because the menu div is now at its 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的情况下解决此问题.

If possible, I'd like to solve this issue without the use of javascript.

这是一个 JSFiddle 来说明问题.

推荐答案

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

Try to set width without max-width and use margin-left to set left gap.

所以编辑的类如下:

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

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

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

And if you want to adjust gaps for mobile devices, then we create the following rules:

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

这篇关于根据div宽度翻译标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！