文本对齐问题：如何保持容器左右文本对齐并统一字号

Hey Mark, let's get this sorted for you—you’re already halfway there with your current code! Here are two simple, reliable ways to fix this:

方法1：用Flex布局（推荐现代方案） #

Flexbox is the cleanest way to handle this kind of alignment. Turning your <h4> into a flex container will let you easily space the text left and right, while ensuring both elements share the same font size automatically.

<h4 style="display: flex; justify-content: space-between; align-items: center;">
  Better Tri-Blend T-Shirt
  <span>£4</span>
</h4>

• display: flex: 把<h4>变成弹性容器，让内部元素可以灵活对齐
• justify-content: space-between: 自动将第一个元素推到容器左边缘，第二个推到右边缘
• align-items: center: 确保两段文本垂直居中，避免因字号细微差异导致的错位

因为<span>在<h4>内部，会自动继承<h4>的字号，不需要额外设置字体大小！

方法2：保留Float并继承字号 #

如果你更习惯用float布局，只需要强制<span>继承<h4>的字号，同时把它放在<h4>标签内就行（之前对齐失效大概率是偶然情况，这个写法完全可行）：

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

• font-size: inherit: 让<span>使用和父元素<h4>完全相同的字号
• 如果想让右侧文本比<h4>更大，直接把inherit换成具体值就行，比如font-size: 1.75rem;（数值可以按需调整）

两种方法都能实现左右对齐的同时，让右侧文本字号达到（甚至超过）<h4>的级别。不过Flex布局在现代网页中更稳定、适配性更强，更推荐使用哦！

内容的提问来源于stack exchange，提问作者user3422687