Question

所以我的这行代码有5个不同的跨度，每个字母有不同的颜色

<span style="color: #B03A2E;">A</span><span style="color: #76448A;">M</span><span style="color: #2874A6;">I</span><span style="color: #239B56;">T</span><span style="color: #B7950B;">Y</span>

但是，我希望我的代码组织得更好，所以我“打破了”跨度。

<span style="color: #B03A2E;">A</span>
<span style="color: #76448A;">M</span>
<span style="color: #2874A6;">I</span>
<span style="color: #239B56;">T</span>
<span style="color: #B7950B;">Y</span>

这样做的问题在于它将HTML输出间隔开而不是一起作为一个单词。为什么会这样，可以修复吗？

Answer 1

换行符和多个空格在HTML中被视为单个空格，但有一些例外情况，如<pre>。你不需要白色空间，然后串起来。

Answer 2

首先，尽量不在标签中使用内联样式，这不是一个好习惯。对于你的情况，最好做这样的事情：

HTML：

<span class="fontColor1 padding-right">A</span>
<span class="fontColor2 padding-right">M</span>
<span class="fontColor3 padding-right">I</span>
<span class="fontColor4 padding-right">T</span>
<span class="fontColor5 padding-right">Y</span>

css：

.fontColor1{color: #B03A2E;}
.fontColor2{color: #76448A;}
.fontColor3{color: #2874A6;}
.fontColor4{color: #239B56;}
.fontColor5{color: #B7950B;}
.padding-right{padding-right:5px;}

https://jsfiddle.net/emilvr/8vfbebsr/1/

Answer 3

你应该这样做：

<span style="color: #B03A2E;">A</span><!--
--><span style="color: #76448A;">M</span><!--
--><span style="color: #2874A6;">I</span>

Answer 4

＆＃13;

span {
   float: left;
}

＆＃13;

    <span style="color: #B03A2E;">A</span>
    <span style="color: #76448A;">M</span>
    <span style="color: #2874A6;">I</span>
    <span style="color: #239B56;">T</span>
    <span style="color: #B7950B;">Y</span>

＆＃13;

为什么在我的<span> s空出格式时格式会发生变化？

4 个答案: