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

标题在同一行上没有中断

2 个答案: