Question

我正在创建一个标题为不同颜色的字词和字体的网站。为此，我将每个单词放在不同的div id中以更改文本颜色。我不确定是否有比这更好的方法...

无论如何，标题的前半部分（彩色部分）低于标题的其余部分。它在Firefox和Chrome上以这种方式显示，但在Internet Explorer上它看起来很好。我不确定为什么会有区别，我尝试过不同的字体，这有时可以减轻问题，但永远不会完全消除它。当然，当我添加填充以使其排成一行时，它会在Internet Explorer上混乱。

以下是该页面的链接：http://www.dinneronthespot.com/index2.html

Answer 1

解决方法是，使用span

<span id="dotPerfect">
    <span id="color1">Dinner </span>
    <span id="color2">On The </span>
    <span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>

Answer 2

试试这个：

#topText > h1 > div {
    display: inline;
}

在样式表中添加此代码

Answer 3

使用span代替div进行此类操作。

<h1>
    <span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>

Answer 4

我已将每个单词放在不同的div id中以更改文本颜色。我不确定是否有比这更好的方法...

最好使用<span> - 标签

DIV-Tags也有一个默认属性“display：block”来自用户代理样式，这就是你必须设置“float：left”的原因（在这种情况下这真的很难看）。

Answer 5

试试这个

<div id="dotPerfect">
  <div id="color1">Dinner </div>
  <div id="color2">On The </div>
  <div id="color3">Spot </div>
  <div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>

将ID为 dotPersonal 的div移至ID dotPerfect 的div。

div中的文字不会排成一行

5 个答案: