Перенос блока на новую строку
sprite.png: 
Однако, к примеру, заяц и «Быстрый» должны быть в одной строке. Как?
Новое, это хорошо забытое старое, используйте возможности «табличной» вёрстки:
Например добавить свойство display: inline-block;
Добавить класс к <ul >
inline-block означает что выбранный блок нужно выводить в одну линию.
Но это только выравнивание, далее нужно будет равнять внутренности
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.8.29.43607
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Вставляем разрыв строки
Иногда я попадал в ситуации, когда есть заголовок с вложенным span. Я хочу быть уверен, что разрыв строки будет перед span. Для записи: нет ничего постыдного в том, чтобы использовать br в такой ситуации (и по факту возможность показывать или прятать его делает этот способ очень действенным). Но…это всегда вызывает небольшой дискомфорт — почему я вынужден использовать html для достижения целей, которые поставлены перед раскладкой.
Поэтому давайте совершим путешествие. Путешествие с большим количеством “Но”.
На это способны блочные элементы
Вместо span мы можем использовать div и мы получим разрыв просто потому что div — блочный элемент.
Но мы использовали span целенаправленно. Текст после переноса строки должен быть строчным (inline)/блочно-строчным (inline-block). У него должны быть внутренние отступы, фон и все в этом духе.
Разрыв строки через псевдоэлемент
Но… span — строчный элемент. Разрыв строки не сработает! Как и настоящий разрыв ни на что не повлияет.
Мы можем заставить заработать этот разрыв строки, добавив смысла пробелам…
Вообще-то это сработало. Но…кусочек внутреннего отступа и фона остаются на первой строке когда строка переносится:
Мы можем починить это нелепое поведение при помощи box-decoration-break: clone;, но… это только увеличит кусок на первой строке.
Если мы сделаем span блочно-строчным, то разрыв строки будет происходить внутри него. А это точно не то, что мы хотели:
Сделать псевдоэлемент блочным и оставить span в покое? Тоже не сработает:
Немного странности: текст с псевдоэлементом
Это была идея Aaron Bushnell. Трюк заключается в том, чтобы сделать span блочным элементом, но затем ввести текст с псевдоэлементом и стилизовать его как строчный элемент.
Я долго был поклонником трюка с псевдоэлементом, но это выглядит опасно, поскольку любые изменения будут болезненными. Некоторые из программ экранного чтения читают псевдоэлементы, но вроде бы не все. Они и не должны! Не говоря уже о том, что вы не можете скопировать текст и вставить его в таком же виде. По крайней мере текст по прежнему только в HTML!
Эксплуатируем табличную раскладку
Моя любимая идея пришла от Thierry Koblentz. Просто напишите span display: table; и все готово. Это не табличные данные конечно, но это и не важно. Возможность придать элементу табличный вид через CSS — это вопрос использования уникальных свойств этого вида в своих целях, а не вопрос семантики.
Перенос на новую строку с помощью flexbox
Предположим, вы хотите создать макет, который выглядит примерно так, с чередующимися строками из трех элементов и одним элементом на всю ширину:
Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?
Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:
Как перенести элемент на следующую строку CSS
Чтобы перенести элемент на следующую строку в CSS, нужно установить для него свойство display со значением block или inline-block . Это приведет к тому, что элемент займет всю доступную ширину (или ширину своего родительского элемента) и перейдет на новую строку.
Например, если у вас есть несколько элементов <span> внутри родительского элемента <div> , и вы хотите, чтобы элементы переносились на новую строку, когда закончилась ширина родительского элемента, вы можете сделать следующее:
Здесь мы используем CSS селекторы, чтобы выбрать все элементы <span> , которые являются потомками элемента <div> . Затем мы устанавливаем для них свойство display: inline-block; , чтобы переносить элементы на новую строку, когда они не помещаются в ширину родительского элемента.
Если вы хотите, чтобы элемент всегда начинался с новой строки, независимо от ширины родительского элемента, вы можете установить для элемента свойство display: block; . Например:
Здесь мы устанавливаем для всех элементов <span> свойство display: block; , чтобы они начинались с новой строки, даже если есть место для размещения их в строке вместе с другими элементами.