如何仅使用HTML实现多个文本元素在同一行无缝排列？

问题原因与修复方案 #

你遇到的间距过大问题主要由错误配置导致，直接按以下步骤修改即可实现无缝贴合效果：

核心修改点 #

• 移除flex容器的justify-content: space-between属性：该属性的作用是将容器内的剩余空间平均分配到各个子元素之间，这是产生大间距的最核心原因，flex默认的对齐规则就可以让子元素紧密排列
• 删除HTML标签之间的换行和空白字符：浏览器会将行内元素之间的空白字符（换行、空格）渲染成额外的间隙，需要手动清除
• 修正counter元素的样式语法错误：原有代码里style:bold是无效写法，改为font-weight: bold生效
• （可选）如果需要控制元素之间的固定小间距，可以给flex容器添加gap: 数值属性自定义间距大小，比如gap: 1px就可以实现1像素的固定间距

修正后的完整代码 #

<span style="display: flex;">
<span>There is </span><strong><span class="counter" style="font-family:Courier New;font-weight:bold" data-target="100">0</span></strong><span> kg spam.</span>
</span>

<script>
const counters = document.querySelectorAll('.counter');
for(let n of counters) {
  const updateCount = () => {
    const target = + n.getAttribute('data-target');
    const count = + n.innerText;
    const speed = 5000; // 调整此处数值修改动画速度
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }
  updateCount();
}
</script>

如果还有微小间距，可以给所有子元素加上margin:0;padding:0清除浏览器默认的内外边距即可。

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