代码之家 › 专栏 › 技术社区 › Clone

如何仅使用HTML将多个元素放在一行上?

css html

Clone · 技术社区 · 4 年前

我试图使用HTML标记和style属性将三个包含文本的元素放在一行上。其中一个元素是正在计数的计数器。不幸的是,在我的解决方案中,元素之间的距离太远,因为我正试图让它们无缝地结合在一起。你能帮帮我吗?

<span style="display: flex; justify-content: space-between;">
<span> There is </span>
<strong><span class="counter" style="font-family:Courier New; style: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; // change animation speed here
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }
  updateCount();
}
</script>

1 回复 | 直到 4 年前

3QuartersColon 4 年前

移除 justify-content: space-between; 在计数器的左右两侧添加填充物应该可以:

<span style="display: flex;">
<span>There is </span>
<strong><span class="counter" style="font-family: Courier New; style: bold; padding: 0 0.2em" 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; // change animation speed here
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }
  updateCount();
}
</script>

您可能需要调整边距大小,但这是我想到的最好的主意。

推荐文章