megazvero, если будете считать тангенсы на js, то двигать абсолютно-позиционированные блоки margin-top'ом будет костылем, потому что проще сразу задать вычисленное в top.
Вообще смотрите по тому, что происходит при разной ширине окна с этими блоками по задумке дизайнера. Может проще треугольники по-другому рисовать.
Что с высотой блока я тоже не знаю. Может, там слева текст причем возможно изменяемой высоты.
В зависимости от этого и решение.
А еще смешно, кому-то выше вы показываете стрелками что должно быть одинаковым расстояние сначала справа от картинки, а мне потом, что слева.
Вы меня извините, но так не бывает )))))
Popkornikus, что-то с логикой... вы хотели уменьшение, но перенос на следующую строку отметили решением.
А ведь я просила сначала определиться, как именно они должны себя вести )))
megazvero, вспоминайте тригонометрию, угол знаете, катет почти знаете (ширина блока - ширина картинки). Со вторым треугольником симметрично.
Вычисляете среднее арифметическое и задаете его в сдвиг (трансформом, марджином или еще чем больше нравится) через js.
А может и через чистый calc получится.
Popkornikus, используйте единицы измерения vw. Только аккуратно, чтобы шрифт не стал совсем нулем и имейте в виду, что у браузеров есть настройка ограничения размера шрифта, обычно стоит где-то на 8px.
Я пытаюсь сделать что-то наподобие адаптивного меню
В вашем коде нет ничего похожего на адаптивность.
Сначала нужно решить, а что они должны делать, если не помещаются.
- уменьшаться
- переноситься на другую строку
- прокручиваться
- убираться в бургер
- еще кучка вариантов
Потом пытаться это реализовать, а потом спрашивать уже что-то конкретное.
p.s. Логотип не должен лежать в списке меню. Это отдельный, самостоятельный элемент. Сами подумайте что такое список и как туда мог попасть логотип. В nav норм, как элемент списка - нет. Если он должен находится по центру, значит его туда можно поместить абсолютом.
И возникли сомнения, нужно ли вообще здесь применять этот инструмент, или в @media-запросах можно решить эту проблему проще.
0. Нет.
Достаточно флекса или columns.
1. Картинки у пунктов это просто псевдоэлементы для блока с текстом. А у вас для этого целый div, в нем i и только у него псевдо. Я понимаю, что i это пример из документации от шрифта, но всё же...
Разница в том, что не может быть одновременно одинаково справа и одинаково слева.