Перевод метки на основе ширины div

ProgramBox

Перевод метки на основе ширины div

Post author:admin
Запись опубликована:22 января, 2022
Post category:Вопросы по программированию

#html #css #label

Вопрос:

В основном это сообщение для того, чтобы не загромождать другое не относящейся к делу информацией.

Я пытаюсь использовать перевод на этикетке, расстояние до которой должно основываться на div меню рядом с ней. Указанное меню изначально не отображается, и метка действует как флажок для отображения/скрытия меню. Он также имеет набор max-width , основанный на ширине страницы, из-за чего у меня возникают некоторые проблемы. Когда страница достаточно широкая, перевод на заданное количество пикселей работает нормально. Однако, когда страница становится слишком узкой (например, на мобильном устройстве), метка находится слишком далеко вправо и иногда даже врезается в кнопку справа. Ниже приведены некоторые изображения, иллюстрирующие это.

Метка меню со скрытым меню:

Именно так это выглядит в настоящее время:

Здесь метка находится слишком далеко справа, потому что раздел меню теперь находится на своем 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, который иллюстрирует проблему.

1. Не могли бы вы создать пример jsfiddle ? И постарайся настроиться width vd вот так width: 1vw

2. @StepUp, То есть вы имеете в виду установить значение max-width 50vw вместо 50% ? Я также добавил jsfiddle в сообщение

3. Мне это идет на пользу. Не могли бы вы создать образ и показать, что не так?

4. В посте выше есть скриншоты. Это происходит, когда ширина окна просмотра становится меньше, чем 400px потому, что тогда max-width начнет появляться меню, и метка будет переведена слишком далеко вправо.

Ответ №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>

1. Вы знаете, я уже использую довольно много медиа-запросов для CSS. Я удивлен, что не подумал о том, чтобы просто добавить еще один.

2. @Lithimlin это нормально, иногда об этом можно забыть 🙂

Метки: Перевод метки на основе ширины div