Html 和 CSS - 文本高度不同

Question

我想将一个 svg 和两个文本放在一行中。第二个文本应右对齐。

但是，如果我将第二个文本设置为 float:right，这两个文本的高度将不同。

这是我的jsbin
https://jsbin.com/gupunu/edit?html,output

这是结果。

我试过text-align、padding、margin。没有任何影响第一个文本。我想将当前的第一个文本放在与第二个文本相同的高度。

Answer 1

将 vertical-align: top 赋给第一个 span:

<div width='50px'>
  <svg width='20px' height='20px'>
     <rect x=0 y=0 width='20px' height='20px' fill='blue'>
  <span class='1' style="vertical-align: top;">Hello</span>
  <span class='2' style="float:right;">World</span>
</div>
<div width='50px'>
  <svg width='20px' height='20px'>
     <rect x=0 y=0 width='20px' height='20px' fill='blue'>
  <span class='1' style="vertical-align: top;">Hello</span>
  <span class='2' style="float:right;">World</span>
</div>