Отключить автоматический перенос блока на новую строку. CSS - Web-Global
Web-Global
info@web-global.ru

Отключить автоматический перенос блока на новую строку. CSS

08.07.2022 270
Поделиться:

Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо — текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.

inline-block — еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/

У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top;

Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение: http://jsfiddle.net/M8een/2/