Html 标题元素在同一行上，不间断

我有一行代码是用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>

.拇指{
文本阴影：2px 2px#FF0000；
空白：nowrap；
}
.点击{
字体风格：斜体；
}
单击缩略图以查看放大的图像

我已尝试使用以下代码：

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

单击缩略图以查看放大的图像

它起作用了，但我想知道还有其他方法来执行此任务吗？

是块级元素。如果需要在同一行上显示，应将其默认值更改为

inline

或

inline block

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

---

还要注意的是，要处理元素内部的空白不在元素本身周围。

您可以将显示指定为内联显示：

<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>

.拇指{
文本阴影：2px 2px#FF0000；
空白：nowrap；
显示：内联；
}
.点击{
字体风格：斜体；
}
单击缩略图以查看放大的图像

但是，请注意，

h2

和

h3

标记是为块级头层次结构设计的。对于要在同一行中显示的内容，

span

通常更合适

有关标题标签用途的更多信息：