Question

您好我试图用一种不同颜色的单词或一组单词。这是我使用的代码：

<h2 class="text-blue">
    We are a <span class="text-orange">photography & video production</span>
    studio improving businesses &amp; brand's image and helping them to achieve their goals
</h2>

css：

.text-blue{
    color: #645f5f;
}

.text-orange{
    color: #ff8400;
}

我的问题是，橙色文本看起来比其余部分小，而不是在同一条线上。谁能告诉我我做错了什么？非常感谢screenshot

Answer 1

这有点奇怪......据我所知，span不应该真正改变文本的大小。我也把它放入Codepen，我没有看到任何区别。但是，如果你真的想确定，我建议只需手动调整.text-orange类，这样文本的大小与其父类的大小相同：

.text-orange{
  color: #ff8400;
  font-size: 100%;
}

试一试。如果有效，请告诉我:)）

Answer 2

好的，我感谢你解决了J.周

我用p改变了跨度并添加了一个显示：inline into my class。以下是代码：

    <h2 class="text-blue">We are a <p class="text-orange">photography & video production</p> studio improving businesses &amp; brand's image and helping them to achieve their goals</h2>

的CSS：

    .text-orange{
color: #ff8400;

显示：内联; }

Answer 3

很有可能你的span在其他地方设置了样式，而且它正在接收display: block - 这就是为什么它会破坏这一行 - 以及font-size。您可以在开发者控制台上看到它。

如果是这种情况，那么我强烈建议您更正它而不是使用其他标记，因为span是最适合内联样式例外的标记。

如果您希望保留该样式，请尝试更改其选择器，使其更具体，因此不会影响您的所有span代码。

Answer 4

只需添加您想要的字体大小：

.text-orange {
font-size: 100% !important;
}

这将撤消任何预定义的样式并使font-size 100％; 同样，您可以使用！important;

添加更多样式

“如果我的答案是正确的，那么请将我的答案标记为正确的答案 - ＆gt;这将有助于我的个人资料谢谢阅读：stackoverflow.com/help/someone-answers”

如何更改h2中单词的颜色

4 个答案: