如何更改 HTML5 中同一行上单词的每个字符的颜色？

Question

我一直在做一些事情，我正在使用app that teaches you HTML5 制作彩虹块。我有一个图表，其中的块排列成彩虹的形状，并且颜色看起来像彩虹。

我正在尝试这样做：RAINBOW，其中 R 是红色，A 是橙色，I 是黄色，N 是绿色，B 是蓝色，O 是靛蓝，W 是紫色（彩虹的颜色）。我唯一的问题是使同一行中的字符不同颜色。

我试过了：

<p style="color:red;">R</p>
<p style="color:orange;">A</p>
<p style="color:yellow;">I</p>
<p style="color:green;">N</p>
<p style="color:blue;">B</p>
<p style="color:indigo;">O</p>
<p style="color:violet;">W</p>

但是当我对每个字母都这样做时，它当然会产生 7 个不同的段落，我希望它在同一行。我该如何解决这个问题？

Answer 1

问题是您为每个字母使用p 元素。 p 是块元素，块元素占据整个可用宽度并从新行开始（导致问题）。

解决方案：改用内联元素（例如，span）。然后所有的字母都会内联显示，而不是每一个都换行：

<span style="color:red;">R</span >
<span style="color:orange;">A</span >
<span style="color:yellow;">I</span >
<span style="color:green;">N</span >
<span style="color:blue;">B</span >
<span style="color:indigo;">O</span >
<span style="color:violet;">W</span >