刚开始从事网络开发,希望你们中的一员能帮助我。 我正在构建一个网站,在 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 中修复此问题,仅举几例。任何帮助将不胜感激!
最佳答案
<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;
}
关于javascript - 结合 Javascript + HTML 时删除自动添加的换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21446879/