Элементы списка по ширине. кроссбраузерно

[cyklop77]

помогите пожалуйста выровнять блоки articles по ширине так чтобы крайние элементы строки прилипали к краям родительского конейнера(обычно в интернет-магазинах таким образом располагаются товары).

здесь я реализовал то, что хочу. но в safari и ie9 расположение ломается((

то же самое, но в jsfiddle, если так удобнее вам будет

важно чтобы articles были выровнены не через float, а через inline-block(так как articles могут быть различной высоты)

[Z1gnet]

ломается потому что хак  font-size: 0;line-height: 0; в сафари не работает. уберите font-size: 0;line-height: 0; и вместо этого компенсируйте отступ справа (margin-right:-4px), в вашем случае правый марджин будет равен 16рх

[cyklop77]

ломается потому что хак  font-size: 0;line-height: 0; в сафари не работает. уберите font-size: 0;line-height: 0; и вместо этого компенсируйте отступ справа (margin-right:-4px), в вашем случае правый марджин будет равен 16рх

почему в сафари не работает?

http://htmlbook.ru/css/font-size

http://htmlbook.ru/css/line-height

с первой версии работает

[Zverushka]

http://jsfiddle.net/Q5vFr/

Вот по-моему лучший способ.

Только надо учитывать, что снизу будет лишнее пусто пространство пикселей в 20-15. Тут может помочь отрицательный маргин (если вообще понадобится). В общем что-нибудь да можно придумать, как лишний отступ срезать

[cyklop77]

http://jsfiddle.net/Q5vFr/

Вот по-моему лучший способ.

Только надо учитывать, что снизу будет лишнее пусто пространство пикселей в 20-15. Тут может помочь отрицательный маргин (если вообще понадобится). В общем что-нибудь да можно придумать, как лишний отступ срезать

спасибо. метод отличный даже несмотря на небольшой косячок в win safari (в моём случае это не критично, так как у текста флаговый набор)

Edited December 1, 2013 by cyklop77

[Z1gnet]

почему в сафари не работает? http://htmlbook.ru/css/font-size http://htmlbook.ru/css/line-height с первой версии работает

вы не поняли. у инлайн блочных блоков есть баг, между ними образовывается отступ в 4рх сбоку. если на родителя инлайн-блочного элемента задать font-size: 0;line-height: 0; (что вы собственно и сделали для .list) то этот отступ убирается. но в сафари данная штука не работает.