如何避免<span>和<div>换行？优化倒计时代码的单行显示与颜色

嘿，我来帮你搞定这个问题！你遇到的多行显示问题，核心原因是代码里用了多个<div>标签——<div>是块级元素，默认会独占一行，所以才会拆成8行显示；而红色字体是因为<font color="#ff0000">这个过时标签在起作用。

下面是具体的修改方案，直接替换你的代码片段就行：

修改后的HTML结构 #

Plus que <strong><span id="clockdiv">
  <span class="time-unit"><span class="days"></span><span class="smalltext">jours</span></span>
  <span class="time-unit"><span class="hours"></span><span class="smalltext">hrs</span></span>
  <span class="time-unit"><span class="minutes"></span><span class="smalltext">mins</span></span>
  <span class="time-unit"><span class="seconds"></span><span class="smalltext">secs</span></span>
</span></strong>

配套的CSS样式（放在<style>标签里或者你的样式文件中） #

/* 替换默认红色，改成你想要的颜色，比如黑色 */
#clockdiv {
  color: #000000;
}

/* 让每个时间单元（数字+文字）横向排列，可自定义间距 */
.time-unit {
  display: inline-block;
  margin: 0 5px;
}

/* 小文字样式，保持紧凑感 */
.smalltext {
  font-size: 0.8em;
  display: block; /* 若希望文字在数字下方则保留；要和数字同行就改成inline */
}

关键修改点说明： #

• 把原来的<div id="clockdiv">换成<span id="clockdiv">，span是行内元素，不会强制换行。
• 用<span class="time-unit">包裹每个时间模块，通过display: inline-block让它们横向排列，同时保留间距更美观。
• 用CSS的color属性替代过时的<font>标签，既符合现代Web标准，也方便随时调整颜色。
• 如果想让单位文字和数字在同一行，把.smalltext的display改成inline即可。

这样修改后，倒计时就会变成单行显示，字体颜色也能按照你的需求调整啦！

内容的提问来源于stack exchange，提问作者Pascal