Question

刚刚开始进行网络开发，并希望你们中的一个能够帮助我。我正在SimpleWeather.js的帮助下建立一个显示天气的网站以及为期四天的预测。在我的javascript中有一个部分，我想要显示特定日期的高点＆amp;低于“|”在中间划分它们。我还想为“|”声明一个类部分，以便我可以改变分频器的颜色。但是，当我这样做时，它会增加两个换行符，我不明白为什么或如何解决它。

代码是

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

然而它显示为：

30

|

28 （其中30是高，28是任何给定日的低温。）

我也尝试使用inline-text，inline-block，block和nowrap在CSS中修复它，仅举几例。任何帮助将不胜感激！

Answer 1

<p>默认情况下是一个块元素。您可以使用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;
}

在组合Javascript + HTML时删除自动添加的换行符

1 个答案: