Глюки между использованием масштабируемых и не масштабируемых модулей

Question

Поэтому я пытаюсь стилизовать ссылки на панели навигации, используя CSS. Когда я устанавливаю свойство space между ссылками, используя заданное значение в пикселях, оно работает отлично.

padding: 0 3rem;

Однако, когда я заменяю эту строку, чтобы использовать следующий код для масштабируемости

padding-left: 15%;

Это вызывает сбой на моем экране, где он находится близко друг к другу, а затем расширяется, когда я нажимаю их. Initial После различных взаимодействий заполнение ссылок медленно расширяется до нужного размера. После некоторого взаимодействия Затем, когда я нажимаю ссылку (для которой еще ничего не установлено, поэтому она возвращается на домашнюю страницу), отступ возвращается к 0. Код отлично работает на всех устройствах. в консоли, но не в браузере, как я это тестирую. Связано ли это с неправильным вычислением процентов заполнения отступов?

Answer 1

Не уверен, почему он это делает. Вы пытались использовать Flexbox?

Если вы установите родительский элемент на display: flex, вы можете использовать justify-content: space-around, чтобы распространить ссылки внутри родительского контейнера.

Затем вы можете добавить медиазапросы и контролировать общий размер родительского контейнера вместо того, чтобы пытаться вычислить пробелы в em или rem. Flexbox автоматически распределит ссылки равномерно.

Вот пример .