Как сделать так, чтобы текст уходил под кург?

Question

[Young11]

У меня есть контейнер в котором есть кружек и текст , мне надо сделать так , чтобы текст был под этим кругом , а он делает отступ слева , что такое чувство , что там есть какой-то блок под кругом ?

Comments

[Lynn «Кофеман»]

Изучите как работает flex.

А вашему желанию больше подходит float: left.

[Young11]

Lynn «Кофеман», не помогло

[Young11]

Максим, тоже не то , они теперь на разных линиях , я хотел реализовать чтобы текст который будет переносится на вторую строчку , зашел под круг , а его подвинуло на то расстояние которое равно ширине круга

[Young11]

Максим,

[Young11]

Максим,

[Максим]

Young11, flat left, flex уберите, для ,container overflow hidden

[Максим]

Young11, с мобилы не удобно писать код: https://codepen.io/topicstarter/pen/PoyqRBg

[Lynn «Кофеман»]

Young11, не flat, а float.

[Ankhena]

Young11,

Просто замените у span display на inline-flex.
Если не понравится расстояние между строками, уменьшите размер и задайте тень.

Answer 1

[HARDOOPS]

.container {
     border: 1px solid red;
     width: 200px;
     font-weight: 700;
     font-size: 24px;
     padding: 0 0 5px 0;
     background: gray;
}

.container * {
     display: inline;
}

.container span {
     margin-right: 6px;
     width: 32px;
     height: 24px;
     background: #FFFFFF;
     border-radius: 10px;
     font-size: 20px;
     align-items: center;
     justify-content: center;
     color: #000000;
     display: inline-flex;
}

А вообще, пора начинать сортировать селекторы и свойства хотя бы по алфавиту, а не делать из всего этого одну большую помойку.

Comments

[Ankhena]

.container * слишком дорогой селектор и не нужен тут, ведь ниже напрямую задаете display

[HARDOOPS]

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

Оформлять текст в блочном элементе без текстового элемента, как минимум, странно, как максимум неправильно. Если текст уйдëт, например, в тег <p>, как думаете, какой у человека будет следующий вопрос?