如何使用marquee标签实现多个移动文本在同一行而非多行展示

结论 #

可以通过marquee标签实现，你当前实现的问题在于循环生成了多个独立的marquee元素，marquee默认是块级元素，每个会独占一行，因此出现垂直排列的效果。

实现方案 #

方案1（推荐：所有内容整体同速滚动） #

将循环逻辑放到单个marquee标签内部，只生成一个滚动容器，所有term都会在同一行内跟随容器滚动：

<marquee behavior="scroll" direction="right" scrollamount="1">
    {% for term in terms %}{{ term }} {% endfor %}
</marquee>

当terms为['term1', 'term2', 'term3']时，最终渲染效果就是term1 term2 term3整行同时向右滚动，完全符合你的预期。

方案2（多marquee独立滚动但同行展示） #

如果你确实需要每个term独立控制滚动参数（比如不同滚动速度），可以给marquee添加行内块样式，让多个marquee在同一行排列：

{% for term in terms %}
    <marquee behavior="scroll" direction="right" scrollamount="1" style="display: inline-block; width: auto;">{{ term }}</marquee>
{% endfor %}

注意这个方案下每个term的滚动是独立的，不会保持固定间距，仅适合需要独立控制的场景。

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