如何通过选取框标签在一行中显示多个移动文本而不是多行？答案

【问题标题】：How to display multiple moving text in one line instead of multiple lines by marquee tag?如何通过选取框标签在一行中显示多个移动文本而不是多行？
【发布时间】：2021-12-18 10:10:24
【问题描述】：

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

例如，如果条款是：

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

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

term1
term2
term3

但我希望它们在移动时显示在一行：

term1 term2 term2

使用 marquee 标签可以做到这一点吗？

【问题讨论】：

标签： html jinja2 marquee

【解决方案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

在marqee之前添加了一个文本

【讨论】：

确实有效！有没有办法给选框区域添加一些背景颜色？
到总选框，是的，你可以在标签中添加background-color: yellow;
是的。这也有效。最后一个改进：如果我在选取框标记之前添加文本“最近的术语：”，它会显示在另一行。添加的文本是否可以在这些移动文本的同一行，就在文本之前：最近的术语：term1 term2 term2？
是的，但您可能需要将这两个包装在一个父标签中，将在 sn-p 中更新它。
让我测试一下。可能我必须为“div”使用另一个名称，否则可能会影响其他现有的“div”标签