javascript - 结合 Javascript + HTML 时删除自动添加的换行符

Question

刚开始从事网络开发，希望你们中的一员能帮助我。我正在构建一个网站，在 SimpleWeather.js 的帮助下显示天气以及四天预报。 .在我的 javascript 中有一个部分，我想用“|”显示特定日期的最高价和最低价在中间将它们分开。我还想为“|”声明一个类部分，以便我可以更改分隔线的颜色。但是，当我这样做时，它添加了两个换行符，我不明白为什么或如何修复它。

代码是

      $("#high-low-one").html(weather.forecasts.one.high+'<p class="high-low-divider">|</p>'+weather.forecasts.one.low);      

然而它显示为:

30

|

28 (30 度是任何一天的最高温度，28 度是任何一天的最低温度。)

我还尝试使用内联文本、内联 block 、 block 和 nowrap 在 CSS 中修复此问题，仅举几例。任何帮助将不胜感激!

Answer 1

<p>默认是 block 元素。您可以使用 CSS 更改此设置，但使用 <span>相反，因为它默认是一个内联元素

你最终会得到:

 $("#high-low-one").html(weather.forecasts.one.high+'<span class="high-low-divider">|</span>'+weather.forecasts.one.low);    

但是我会在 span 中设置临时表的样式元素并使用 :after pseudo-element添加和设置管道字符的样式。

类似于:

$("#high-low-one").html("<span class='high'>" + weather.forecasts.one.high + "</span><span class='low'>" + weather.forecasts.one.low + "</span>");

使用一些示例 CSS:

#high-low-one .high
{
    color:#F00;    
}

#high-low-one .high:after
{
    content: "|";
    color: #0F0;
    padding-left:0.5em;
    padding-right:0.5em;
}

#high-low-one .low
{
    color:#00F;    
}

这会给你这样的东西:http://jsfiddle.net/D29AH/

为了完整性，如果你真的必须使用 <p>使用以下 CSS

.high-low-divider
{
    display:inline;
}