如何通过marquee标签在一行而不是多行显示多个移动文本？

Question

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

例如，如果条款是：

terms = ['term1', 'term2', 'term3']

它们目前垂直显示并向右移动：

term1
term2
term3

但我希望移动时能显示在一行:

term1 term2 term2

选取框标签可以做到这一点吗？

Answer 1

试试

.marquee-wrapper {
  display: flex;
}

marquee {
  flex: 1;
}

<div class="marquee-wrapper">
    <span>Recent Items: </span>
    <marquee style="background-color: yellow;" behavior="scroll" direction="right" scrollamount="1">
        <!-- {% for term in terms %}
            {{ term }}
        {% endfor %} -->
        Text to move
    </marquee>
</div>

这会将所有文本放在一个选取框内，并且会一个接一个地移动。

编辑

为选取框标记添加了背景色

EDIT-2

在字幕前添加了一段文字

如何通过marquee标签在一行而不是多行显示多个移动文本？

How to display multiple moving text in one line instead of multiple lines by marquee tag?

html

jinja2

marquee