Отключить автоматический перенос блока на новую строку. CSS - Web-Global: Связывая миры через веб-технологии
Web-Global

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

Пост опубликован 8 июля 2022 в 10:28 и находится в рубриках HTML&CSS. 516
Поделиться:

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

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

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

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