Как выровнять элементы меню от центра в разные стороны?

Question

[iBird Rose]

Стоит задача сделать такое меню навигации:

Условия:
1) logo не должно быть внутри li меню - должно быть отдельно от самого ul
2) Меню должно быть сделано одним ul. Разделять на 2 нельзя (изначально в хтмл 1 ul, а потом через js делать 2 тоже нельзя)
3) Разделы меню конечно же могут меняться. Длины названий меняться и т.д. И всегда оно должно также быть от центра по краям по середине.

Вроде все. Есть идеи?

Answer 1

[Andrej Sharapov]

на flexbox сделайте его. а почему нельзя делать 2 списка?

Comments

[iBird Rose]

меню достаточно часто видоизменяется по страницам. и бекендеры просили (очень просили) оставить html меню без изменений. (ну кроме таких, которые можно будет применить сразу везде. а не отдельно по страницам.)

[Andrej Sharapov]

iBird Rose, понятно. просто, если по хорошему, его можно было бы разбить на 2 списка и прописать

display: flex;
  justify-content: space-between;

или space-between, тогда они у вас разбегутся по сторонам как вам нужно, а лого останется где повесили.

[Andrej Sharapov]

iBird Rose, накидал для наглядности https://jsfiddle.net/4u1tvpxo/3/

[iBird Rose]

Andrej Sharapov, если бы можно было с двумя списками - я бы не обращался на тостер)
p.s. кстати идея такая, что меню идет от центра к краям. а у вас в фиддле наоборот.

Answer 2

[profesor08]

На css никак. Позиционируй на js абсолютом, подсчитывая их позицию при загрузке и изменении размера окна.

Answer 3

[Александр]

• во-первых: выровнять
  
• во-вторых: только js (или необходимо убавить список требований)