Как избежать разрывов строк в тегах заголовка?

Question

Я использую теги заголовков и не хочу разрывов строк после них.

Я пытался использовать свойство display: inline;, но оно не работало.

HTML:

<h5>Token No.:</h5> <h4>147</h4>

CSS:

h5 {
    display: inline;
}

Это не должно приводить к разрывам строк, но после "Token no. :"

"

Answer 1

Вы можете использовать оболочку для своего кода и использовать свойство display: flex следующим образом

<section class="section-wrapper">
<h5>Token No.:</h5>
<h4>147</h4>
</section>


<style> // No need to use <style> tags if you have a seperate css file
    .section-wrapper {
      display: flex;
      flex-direction: row;
    }
</style>

Answer 2

Самый чистый метод для этого:

<h5>Token No.: <span>147</span></h5>

Примечание. Теги заголовка являются элементом уровня блока по умолчанию, поэтому всякий раз, когда вы складываете теги заголовков вертикально друг за другом, они занимают всю ширину и разбивают строку в каждом теге заголовка.Поэтому я использовал встроенный элемент уровня внутри элемента уровня блока, чтобы он не ломался.Встроенные элементы уровня располагаются горизонтально один за другим.

<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>

Но элементы блочного уровня укладываются вертикально

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Так что, если вы не хотите разбивать строку в своем HTML, вам, вероятно, следует определить display: inline для этих обоих тегов заголовка.Вы установили только h5 на dislay: inline;.Вам нужно установить оба параметра для отображения inline или установить float: left; на h5.

h5, h4 { float: left}

<h5>Token No.: </h5> <h4> 147</h4>

Answer 3

вам также нужно поставить display:inline для h4.

js пример скрипки

h5, h4 {
  display: inline;
}

Answer 4

Возможно, вам необходимо знать, что h1, h2, h3 ... имеют собственный собственный стиль, поэтому слова в этих тегах могут быть больше.

Если вы хотите показатьтекст, всегда лучше использовать <span>.

<span>Token No.:</span> <span>147</span>

Answer 5

Разрыв строки, который вы видите, на самом деле вызван внутренними вертикальными полями над и под каждым из тегов заголовка; Вы можете устранить это, установив margin: 0 на h4 и h5:

h4, h5 {
  margin: 0;
}

<h5>Token No.:</h5>
<h4>147</h4>

Answer 6

Требуется встроенный дисплей h4 и h5, может потребоваться установить !important для переопределения другого селектора

h5, h4 {
    display: inline !important;
}

Обновлен:

Если вы хотите воздействовать только на текущий раздел, вы можете перейти в div с классом

<div class='token'>
   <h5>Token No.:</h5> <h4>147</h4>
</div>

1010 * CSS *

.token h5, .token h4 {
        display: inline !important;
 }

h5, h4 {
    display: inline !important;
}

<h5>Token No.:</h5> <h4>147</h4>