在元素内向左移动跨度

问题描述 投票:0回答:1

我有一个特殊的情况,我必须在标题的右边到左边浮动一个范围。问题是它必须是css2,因为它是用于epub2-book的。

根据我到目前为止的情况(请参阅底部),当它只有一行时看起来不错:

enter image description here

但是空间较小,所以当两行时会出现这样的结果:

enter image description here

我猜是因为跨度实际上仍然在<h1>的末尾,所以它移到了底线。我尝试使用vertical-align: toptop:0;进行此操作。但这是行不通的。

span{
    float:left;
    display:inline-block;
    margin-right: 1em;
   
}
<h1>text hahaha I am such a cool text!
   <span>|left Text|</span>
   </h1>

有没有办法将零件移到元素的开头?还是让它浮动到顶部? (是的,我知道没有float:top)

谢谢大家...

html css epub
1个回答
0
投票

如果知道您的文本宽度,则可以使用position:absolutetext-indent对其进行修改

span {
  position:absolute;
  top:0;
  left:0;
  text-indent:0px;
}

h1 {
  position:relative;
  text-indent:140px;
}
<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>
热门问题
推荐问题
最新问题