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

Question

[Александр Панков]

Здравствуйте.

Собственно такое дело, нужно как то сверстать так, чтобы инлайновые блоки не реагировали на изменения других блоков - не прыгали!

Вот я накидал вроде работает, если перключать по порядку!
JSFiddle

Но если переклчаться между 2ым т 5ым, например, блоки между ними прыгают! как от этого избавиться?

От "обычного" прыгания(оно кстати из-за жирности текста станвоаится, тк ширина блока тоже увеличивается и остальные реагируют) избавился блоком ::after

Answer 1

[xmoonlight]

.type li.active {
box-shadow: 0 0 0 2px #fdb913 inset;

остальное пойдёт)

Comments

[Александр Панков]

Ха!! Гениально! Спасибо!

[xmoonlight]

Welcome!

Answer 2

[L0k1]

не заглядывая особо в код:
-можно изначально задать прозрачный бордер, а потом его красить
-можно задать элементу box-sizing: border-box; - и будет счастье

Comments

[L0k1]

и совет - смена нормального шрифта на болд - это кошмар кошмарный

Answer 3

[Anton Kolesnikov]

box-sizing все таки CSS3 свойство, поэтому будет работать не везде. С прозрачным или под цвет фона бордером самое оптимальное и кроссбраузерное решение, без изобретения велосипеда конечно же.