文字对齐问题

Question

伙计们，我试图让两个文本粘在容器的左侧和右侧

我使用以下

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

这看起来像这样

正如你所看到的那样，它既可以左右对齐，但右边的字体大小比左边小，而且不一样

如何使正确的字体更大（例如h4）或更大

我曾尝试用h4进行覆盖，但是这种方法是正确的对齐

艾米帮助赞赏

标记

Answer 1

这是你想要的吗？

标题（h1, h2, h3..）是块元素，这意味着它们占据全宽。

他们的字体大小是固定的，由浏览器定义，除非被样式表覆盖。

要使两个或多个标题相互对齐，请将它们display: inline;或display: inline-block;

如果尺寸不同，您可以选择使用vertical-align:middle;垂直居中。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在h4中插入范围：

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