html - 向右浮动会向上移动跨度元素吗？

Question

您好，我一直在尝试使 span 和 h1 元素位于同一行。然而 float:right 将导致 span 移动到顶部。我尝试过不同的方法，我不想使用 margin 属性。对此有什么建议吗？

.pull-left {
  float: left;
  width: 70%;
}

.pull-right: {
  float: right;
  width: 20%;
}

<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

这只是 h1 标签的默认边距，您需要将其删除。

如果你想基于 h1 垂直居中 span 那么只需使用 line-height:font-size of h1

Fiddle Here

.block h1
    {
      margin:0px;
    }
    .block span
    {
      line-height:2em;
    }
    .pull-left{
      float:left;
      width:70%;
    }
    .pull-right:{
      float:right;
      width:20%;
    }

<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>