Какой самый оптимальный вариант сделать меню с лого?

Question

[intriga93]

тоесть есть меню
в нем четыре пункта + лого
лого по центру (а два пункта по бокам)

или просто делается так - третьим пунктом меню - логотип?
https://jsfiddle.net/3nbajewc/

Comments

[Ankhena]

Лого абсолютом, в список пунктов меню оно логически не очень вписывается.
Меню флексом, 3 пункту левый margin auto.

[intriga93]

Ankhena, спасибо, а как можно подправить?
https://jsfiddle.net/5z1L6w9q/

[Ankhena]

intriga93, что именно, как оно должно выглядеть?

[intriga93]

Ankhena, лого почему то не видно ( точки вместо надписи озон)
и плюс как следствие (как мне кажется, тоесть ошибки связаны) расстояния между пунктами не одинаковые

[Ankhena]

intriga93, логотипу вы задали максимальную ширину 30 точек.
Расстояние между пунктами одинаковое, по 80px, как вы и задали.

[intriga93]

Ankhena, так суть в том, что не видные некоторые пункты. и соответсвенно расстояния нет https://jsfiddle.net/y3ev5fn1/2/

[intriga93]

Ankhena, просто кого не спрашиваю и мои попытки также безуспешны были

[Ankhena]

intriga93, сейчас вы всем элементам задаете одинаковый отступ. Раньше 80, сейчас 20.
Но ведь между 2 и 3 не 80.
А два раза по 80 + ширина логотипа.

[intriga93]

Ankhena, так дело в самой методике, чтобы потом можно было поменять. В макете вообще по 40

[Ankhena]

intriga93, хорошо, 40+40+ ширина лого.
Ширину лого можно узнавать на js и писать в css-переменную.

[intriga93]

Ankhena, я вот делаю
задаю через css, но не суть ( переделать не проблема, главное знать, что писать)

14 строкой в css задаю стили. НО как то все-равно нету расстояния везде одинакового

https://jsfiddle.net/bwpe38od/5/

[Ankhena]

intriga93, я сейчас заплачу.
Калькулятор даже на компе есть встроенный, никуда ходить не надо.

Вы ставите между ссылками 40px.

Между 2 и 3 ставите 245.
Ширина лого 175 (165+5+5).
Остается 245-175 = 70.
70 пополам это 35.

И да, 35 не равно 40.
Поэтому отступы не равны.
Посчитаете, чтобы были одинаковыми - будут одинаковыми.

[intriga93]

intriga93, вот вариант который был ранее
jsfiddle.net/bwpe38od

[Ankhena]

intriga93,

вот вариант который был ранее
jsfiddle.net/bwpe38od

А в этом варианте вы просто забыли убрать паддинг у ul.

Просто очень внимательно смотрите что показывает инспектор, обводите рамками, тенями, outline. Рамки бордером не лучший вариант, так как так или иначе влияет на ширину.
Хороший вариант outline и outline-offset с отрицательным значением на ширину outlin'а.

[intriga93]

Ankhena, ставлю 35
все-равно не так

https://jsfiddle.net/nspLkhze/2/

[intriga93]

Ankhena,outline
https://jsfiddle.net/nspLkhze/3/

[intriga93]

Ankhena, вроде выравнивается как нужно если дать последниму пункту меню в списке margin-right: 80px
не знаю насколько тут это корректно

[Ankhena]

intriga93, потому что нет симметрии у пунктов меню...

[intriga93]

Ankhena, так маргин райт нормально тут? последнему элементу