在沒有中斷的同一行上標題元素

Question

我有一行代碼，使用CSS進行樣式化。我希望它出現在一條線上。

<style> 
.thumb { 
    text-shadow:2px 2px #FF0000; 
    white-space: nowrap; 
} 

.click { 
font-style: oblique; 
} 
</style> 

<h2 class="click"> 
    Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged 
</h2> 

我曾嘗試使用下面的代碼嘗試：

<h2 class="click"> 
    Click a <span style="text-shadow:2px 2px #FF0000">thumbnail image</span> to see it enlarged 
</h2> 

它的工作，但我想知道的是有執行此任務的任何其他方式？

Answer 1

<h3>是塊級元素。如果您需要將其顯示在同一行上，則應將其默認display type更改爲inline或inline-block。

<h2 class="click"> 
    Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged 
</h2> 

h3.thumb { 
    text-shadow:2px 2px #FF0000; 
    white-space: nowrap; /* Is this really needed?? */ 
    display: inline; /* Or inline-block */ 
} 

還要注意的是，white-space是處理內元素中的白色空間; 不是圍繞元素本身。

Answer 2

您可以指定顯示爲內聯：

<style> 
    .thumb { 
     text-shadow:2px 2px #FF0000; 
     white-space: nowrap; 
     display: inline; 
    } 

    .click { 
     font-style: oblique; 
    } 
</style> 

<h2 class="click">Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged</h2> 

但是，請注意h2和h3標籤是專爲塊級標題層次。對於要在同一行內顯示的內容，span通常更合適。在標題標籤的目的

更多信息：http://accessibility.psu.edu/headingshtml