Почему текст соскакивает вниз?

[borus]

Текст соскакивает на строку ниже иконок:

http://jsfiddle.net/7WMMy/3/

Почему?

Edited March 24, 2014 by borus

[Aleksandr.L]

Потому-что ему не хватает ширины. Если вывести на весь экран - то все нормально. http://jsfiddle.net/7WMMy/3/embedded/result/

[borus]

Потому-что ему не хватает ширины. Если вывести на весь экран - то все нормально. http://jsfiddle.net/7WMMy/3/embedded/result/

вы будете смеяться, но и по этой ссылке у меня шрифты соскакивают на строку ниже иконок  причем одна ширина контента спана на моем большом экране составляет порядка 600 px. Да и к спанам применено box-sizing: border-box; 

Edited March 24, 2014 by borus

[Aleksandr.L]

Вот так вы хотели? http://jsfiddle.net/vaCFg/

[borus]

Вот так вы хотели? http://jsfiddle.net/vaCFg/

да. Благодарю. А что же мешает работать моему варианту? О, гуру вёрстки, просветите пожалуйста...

[zenw]

Вы задали ширину спана в 33%, а потом добавляете иконки и левый padding в 25 пикселей. Выходит, что ширина каждого спана равна 33% + 25px, в результате общая ширина спанов получается больше 100%. Поэтому последний спан сползает.

[Aleksandr.L]

Вы задали ширину спана в 33%, а потом добавляете иконки и левый padding в 25 пикселей. Выходит, что ширина каждого спана равна 33% + 25px, в результате общая ширина спанов получается больше 100%. Поэтому последний спан сползает.

 

Вообще-то у него прописан box-sizing: border-box. Это скорее всего происходит из-за line-height.

[borus]

да, похоже что-то отменяет border-box. Если уменьшить line-height у p, то текст становится на место, но как тогда отцентрировать по вертикали?.. Наверно display:table ?...

Такс, осталось сделать спаны по 33%. Подскажите как?

 

http://jsfiddle.net/n9TkJ/

Edited March 24, 2014 by borus

[xzarxzes]

да, похоже что-то отменяет border-box. Если уменьшить line-height у p, то текст становится на место, но как тогда отцентрировать по вертикали?.. Наверно display:table ?...

Такс, осталось сделать спаны по 33%. Подскажите как?

 

http://jsfiddle.net/n9TkJ/

http://jsfiddle.net/xzarxzes/QfqhA/

[borus]

http://jsfiddle.net/xzarxzes/QfqhA/

 

Благодарю.

 

Сделал почти как у вас, пытаясь заставить работать свой пример. Не получается только, чтобы выводилось одно изображение из спрайта. Почему? Ведь высоту ячейки таблицы выставляю в 19 px. А она в 55 px по факту берётся...

Edited March 25, 2014 by borus

[bvvell]

http://jsfiddle.net/bvvell/7WMMy/5/ вот ваш пример, проблема была в том, что у d:i-b есть отступы как у обычного текстового элемента, чаще всего "лечиться" fs:0 родителю, и задавать fs детям 

[borus]

http://jsfiddle.net/bvvell/7WMMy/5/ вот ваш пример, проблема была в том, что у d:i-b есть отступы как у обычного текстового элемента, чаще всего "лечиться" fs:0 родителю, и задавать fs детям 

можно теперь без условных обозначений?  ничего не понял. в представленной Вами ссылке текст по прежнему на следующей после иконки строке

Edited March 25, 2014 by borus

[bvvell]

 

http://jsfiddle.net/bvvell/7WMMy/5/ вот ваш пример, проблема была в том, что у d:i-b есть отступы как у обычного текстового элемента, чаще всего "лечиться" fs:0 родителю, и задавать fs детям 

можно теперь без условных обозначений?  ничего не понял. в представленной Вами ссылке текст по прежнему на следующей после иконки строке

 

прошу пощения, не то пытался поправить

http://jsfiddle.net/bvvell/7WMMy/5/ вот практически полностью ваш пример

[borus]

 

Вот, что я вижу по этой ссылке

[SelenIT]

Проблема действительно в line-height. У инлайн-блоков она оказывается унаследованной от родителя (т.е. 50px) и текст в них пытается выровняться по центру 50-пиксельной полосы (даром что большая часть ее переполняет 18-пиксельный инлайн-блок). Нужно задать им отдельную line-height поменьше (для выравнивания текста в них), а большая line-height контейнера останется для центрирования самих блоков.

 

Вторая проблема — межсловные пробелы между инлайн-блоками, добавляющиеся к суммарной ширине — тоже присутствует, убрать ее (задав нулевой или микроскопически малый font-size контейнеру) крайне желательно. Ну и box-sizing: border-box пока, увы, нуждается в -moz-префиксе (только с Fx29 он отпадет).

 

Итого: http://jsfiddle.net/7WMMy/11/

[borus]

Проблема действительно в line-height. У инлайн-блоков она оказывается унаследованной от родителя (т.е. 50px) и текст в них пытается выровняться по центру 50-пиксельной полосы (даром что большая часть ее переполняет 18-пиксельный инлайн-блок). Нужно задать им отдельную line-height поменьше (для выравнивания текста в них), а большая line-height контейнера останется для центрирования самих блоков.

 

Вторая проблема — межсловные пробелы между инлайн-блоками, добавляющиеся к суммарной ширине — тоже присутствует, убрать ее (задав нулевой или микроскопически малый font-size контейнеру) крайне желательно. Ну и box-sizing: border-box пока, увы, нуждается в -moz-префиксе (только с Fx29 он отпадет).

 

Итого: http://jsfiddle.net/7WMMy/11/

поклон и благодарность. Как же я ждал вас, Селеныч