Проблема выравнивания текста

Question

ребята, у меня есть проблема, пытаясь заставить два текста придерживаться слева и справа от контейнера

Я использую следующее

<h4>Better Tri-Blend T-Shirt</h4>
<span  style="float: right ">£4 </span>

Это выглядит так

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

Как мне сделать правильный шрифт больше (например, h4) или даже больше

Я пытался покрыть h4, но это выбивает правильное выравнивание

Эми, помощь оценена

Mark

Answer 1

Просто вставьте диапазон внутри h4:

<h2>Better Tri-Blend T-Shirt<span style="float:right; ">£4</span></h2>

Answer 2

Это то, что вы хотите?

Заголовок (h1, h2, h3..) - это блочные элементы, что означает, что они занимают всю ширину.

Размеры их шрифтов являются фиксированными и определяются браузером, если только они не переопределяются таблицами стилей.

Чтобы два или более заголовка совпали друг с другом, сделайте их display: inline; или display: inline-block;

При желании вы можете использовать vertical-align:middle; для их вертикального центрирования, если они имеют разные размеры.

h4,h2 {
  display: inline-block;
  margin-right:10px;
  vertical-align:middle;
}

<div>
  <h4>Better Tri-Blend T-Shirt</h4>
  <h4>£4 </h4>
</div>
<br/>
<br/>
<div>
  <h4>Better Tri-Blend T-Shirt</h4>
  <h2 style="float:right">£4 </h2>
</div>