Question

我被迫为以下情况找到解决方案：

我有一个h1标签，如下所示：

<h1 style="text-align: left">FOO FOO FOO<span class="h1subSpan">FOO 1 Foo 2</span></h1>

结果应如下所示：
FOO FOO FOO 这个空间是隐形的，通过漂浮 Foo1 Foo 2

此解决方案适用于FF，Opera和IE8。我如何适应这一点，以及与IE 7一起使用？

.h1subSpan
{
  font-size:small;
  float:right;
  padding-right:19px;
  padding-top:5px;
}

Answer 1

最简单的方法是执行以下操作：

将h1样式设置为position：relative。将.h1subSpan类设置为position：absolute;右：19px;顶部：5px;

这应该把它放在你想要的地方，只要你取下浮子：就在跨度上。

Answer 2

首先，确保您的HTML文档有DOCTYPE。

其次，尝试添加：

h1 { overflow: hidden; }

Answer 3

浮动：对CSS和IE7不是大朋友

试试这个

    .h1subSpan
{
  font-size:small;
  position: absolute;
  top: 0;
  right: 0;
  padding-right:19px;
  padding-top:5px;
}

或者，看看http://www.makeyougohmm.com/20071019/4873/

Answer 4

这是另一种方式 - 它不使用定位，但它需要为左侧文本和清除元素添加一些额外的标记。适用于IE7，但我没有IE6来试试。

<style type="text/css"> 
  h1 {
    font-size:small; 
    padding-right:19px; 
    padding-top:5px; 
  }
  .h1subSpan1 { 
    float:left; 
  }
  .h1subSpan2 { 
    float:right; 
  }
</style> 


<h1><div class="h1subSpan1">FOO FOO FOO</div><div class="h1subSpan2">FOO 1 Foo 2</div><br clear="all" /></h1>

如何在标题标签内定位跨度？

4 个答案: