Позиционирование элементов списка.

[Super_Saimon]

Добрый день! Имею вот такой нюанс https://jsfiddle.net/yqfyb014/2/ Не понимаю как при помощи CSS решить проблему с позиционированием. Так как я предполагал, что сделав отступ для первого элемента списка, я "паровозом" выровняю все остальные элементы. Но получилось, собственно, то, что на изображении. И хотелось бы понять-как достучаться до первого элемента каждой строки? 

[mrnobody]

Так нужно?

https://jsfiddle.net/mrnobody/yqfyb014/3/

[Super_Saimon]

39 минут назад, mrnobody сказал:

Так нужно?

https://jsfiddle.net/mrnobody/yqfyb014/3/

Да, результат искомый. Но я бы хотел понять как, не прибегая к свойству font-size, справиться с такой проблемой. Как отменить margin-left для первого элемента новой строки? Учитывая что это все элементы одного списка.

[SelenIT]

19 минут назад, Super_Saimon сказал:

Как отменить margin-left для первого элемента новой строки?

Увы, никак (если только ширина не фиксирована и кол-во элементов в строке константа — тогда можно через :nth-child).

А насколько критично сделать это именно на инлайн-блоках? Нельзя для 90% браузеров (включая IE11+, всякие UC Browser'ы и даже Оперу Мини) сделать через display:inline-flex; flex-flow: row wrap; justify-content: center; (просто дописав это для .box__list), тогда отрицательный margin будет вообще не нужен — а решение на инлайн-блоках, пусть и со злополучными пробелами, оставить как фолбэк для оставшихся ископаемых 10%?

[Super_Saimon]

6 минут назад, SelenIT сказал:

Увы, никак (если только ширина не фиксирована и кол-во элементов в строке константа — тогда можно через :nth-child).

А насколько критично сделать это именно на инлайн-блоках? Нельзя для 90% браузеров (включая IE11+, всякие UC Browser'ы и даже Оперу Мини) сделать через display:inline-flex; flex-flow: row wrap; justify-content: center; (просто дописав это для .box__list), тогда отрицательный margin будет вообще не нужен — а решение на инлайн-блоках, пусть и со злополучными пробелами, оставить как фолбэк для оставшихся ископаемых 10%?

Та вот задание без flex-a. По факту, я уже его перевыполнил: это отсебятина - попытка убрать пробелы между блоками и сохранить центровку через "inline-block". Но столкнулся с такой вот оплошностью. А, немного отходя от темы, возможно ли этот нюанс решить с помощью JavaScript?

Edited November 6, 2017 by Super_Saimon

[SelenIT]

В принципе, можно-то и на инлайн-блоках: кроме упомянутого обнуления размера шрифта, можно сделать симметричные отриц. отступы по 2.5-3px с обеих сторон, можно вместо отриц. отступов использовать такой же отрицательный `letter-spacing` или `word-spacing`, можно честно убрать или «закомментарить» пробелы между тегами в разметке, можно не использовать закрывающие теги для `li` (они опциональны, и при их отсутствии тег закрывается автоматом прямо перед следующим открывающим), можно использовать для родителя кастомный шрифт, в котором у символа пробела нулевая ширина... Но практическая ценность этого на сегодня, имхо — разве что пройти задание «сделать без флексов».

Скриптами можно всё, но для этой задачи скрипт — явно перебор

[Super_Saimon]

18 часов назад, SelenIT сказал:

В принципе, можно-то и на инлайн-блоках: кроме упомянутого обнуления размера шрифта, можно сделать симметричные отриц. отступы по 2.5-3px с обеих сторон, можно вместо отриц. отступов использовать такой же отрицательный `letter-spacing` или `word-spacing`, можно честно убрать или «закомментарить» пробелы между тегами в разметке, можно не использовать закрывающие теги для `li` (они опциональны, и при их отсутствии тег закрывается автоматом прямо перед следующим открывающим), можно использовать для родителя кастомный шрифт, в котором у символа пробела нулевая ширина... Но практическая ценность этого на сегодня, имхо — разве что пройти задание «сделать без флексов».

Скриптами можно всё, но для этой задачи скрипт — явно перебор

Спасибо за разъяснение и потраченное время! Очень помогли.