Ярлыки не будут отображаться в строке

-6

Я пытаюсь получить 3 ярлыка для отображения встроенных, но по какой-то причине они не работают и остаются в одной строке. Что я делаю не так?

<style>

.topBar {
display: inline;
}

</style>

<label class = "topBar">One</label>
<label class = "topBar">Two</label>
<label class = "topBar">Three</label>

спросил(а) 2021-01-25T18:45:29+03:00 4 месяца, 2 недели назад
1
Решение
78

Ваш код работает:


.topBar {
display: inline;
}
<label class="topBar">One</label>
<label class="topBar">Two</label>
<label class="topBar">Three</label>

Это даже поведение по умолчанию в большинстве браузеров, см. Пример без css:


<label class="topBar">One</label>
<label class="topBar">Two</label>
<label class="topBar">Three</label>

Если он не работает, возможно, это связано с противоречивым правилом. Попробуйте добавить специфику:

label.topBar {
display: inline;
}

Или

#mypage label.topBar {
display: inline;
}

ответил(а) 2021-01-25T18:45:29+03:00 4 месяца, 2 недели назад
76

Вы хотите...

"Я пытаюсь получить 3 ярлыка для отображения встроенных"

но затем скажите

"они не показывают [inline] и остаются в одной строке"

Атрибут display inline означает отображение их в одной строке.

Если вы хотите, чтобы они были сложены/каждый в своей собственной строке, попробуйте установить display: block;

Если они являются частью чего-то, навигационного блока или некоторых связанных элементов, вы можете уменьшить тегирование, которое вы делаете с классами, объединив их в контейнер с классом "topBar"

div.topBar label {
display: block;
}
<div class="topBar">
<label>One</label>
<label>Two</label>
<label>Three</label>
</div>

ответил(а) 2021-01-25T18:45:29+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема