如何在標題標籤內放置跨度？

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風格爲位置：相對的。 將.h1subSpan類設置爲position：absolute;右：19px; top：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>