Как блочные элементы сделать строчными в css?

Пользователь

jaren

от jaren , в категории: HTML/CSS , 2 года назад

Пользователь

emanuel_boyer

от emanuel_boyer , 2 года назад

@jaren Для того чтобы блочные элементы сделать строчными в CSS нужно задать значение display как inline-block:

HTML:

<body>
    <div class="block">
        <h1>Привет!</h1>
        <p>Как дела?</p>
    </div>
</body>

CSS:

.block h1,
.block p {
    display: inline;
}

Пользователь

eryn.rodriguez

от eryn.rodriguez , год назад

@jaren

В CSS есть несколько способов сделать блочные элементы строчными.

1
2
3

.block {
  display: inline-block;
}

1
2
3

.block {
  float: left;
}

1
2
3

.block {
  position: absolute;
}

Свойство "display" со значением "flex" в родительском элементе и "flex-item" в дочернем элементе:

.parent {
  display: flex;
}

.child {
  display: flex-item;
}

Свойство "display" со значением "inline-flex" в родительском элементе и "flex-item" в дочернем элементе:

.parent {
  display: inline-flex;
}

.child {
  display: flex-item;
}

1
2
3

.block {
  display: table-cell;
}

Выбор метода зависит от конкретных требований и дизайн-решений веб-страницы.

Похожие обсуждения: